React15 - React15应用Sass使用指南

在 React 15 项目中使用 Sass，核心思路和现在基本一致，主要区别在于构建工具（Webpack）的配置方式。因为 React 15 时代 create-react-app 还不像现在这样内置了对 Sass 的支持，所以通常需要手动配置 Webpack。

核心步骤概览

简单来说，你需要通过 npm 安装 Sass 的依赖包，然后配置 Webpack 的 loader 来处理 .scss 或 .sass 文件。

步骤	操作	说明
1. 安装依赖	npm install sass-loader node-sass --save-dev	安装 Webpack 中使用 Sass 必需的 loader。
2. 配置 Webpack	在 webpack.config.js 中修改 module.rules	添加一条规则，让 Webpack 用 sass-loader 处理 Sass 文件。
3. 创建并使用样式文件	新建 .scss 文件，并在组件中 import	在 JavaScript 文件中直接导入 Sass 文件即可。

---

详细操作指南

1. 安装必要的 npm 包

首先，你需要在你的项目根目录下，通过终端安装 sass-loader 和 node-sass。sass-loader 负责让 Webpack 识别 Sass 文件，而 node-sass 则是实际的编译工具。

npm install sass-loader node-sass --save-dev

注意：node-sass 有时可能会安装失败，如果你遇到问题，也可以尝试使用 npm install sass 来安装 dart-sass，它是现在更推荐的 Sass 实现，且与 sass-loader 兼容。

2. 配置 Webpack

这是与使用 create-react-app 创建的新项目最大的不同点。你需要找到项目中的 Webpack 配置文件（通常是 webpack.config.js），然后在 module.rules 数组中添加或修改一条规则。

如果你希望在项目中同时使用普通的 CSS 和 Sass，配置会类似这样：

// webpack.config.js 文件片段
module.exports = {
  // ... 其他配置
  module: {
    rules: [
      // ... 其他 loader 规则 (比如 babel-loader)
      {
        // 1. 规则匹配：匹配 .scss 或 .sass 文件
        test: /\.(scss|sass)$/,
        // 2. 使用哪些 loader (执行顺序从右到左)
        use: [
          "style-loader", // 3. 将编译后的 CSS 以 <style> 标签形式注入到页面
          "css-loader", // 2. 解析 CSS 中的 import 和 url() 语法
          "sass-loader", // 1. 将 Sass 编译成 CSS
        ],
      },
      {
        // 处理普通的 .css 文件
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

关键点说明：

• Loader 顺序：use 数组中的 loader 执行顺序是从下到上，从右到左的。所以必须是 sass-loader 先执行，将 Sass 转为 CSS，然后 css-loader 处理，最后由 style-loader 将样式插入页面。
• test 正则：/\.(scss|sass)$/ 这个正则表达式告诉 Webpack，所有以 .scss 或 .sass 结尾的文件都由下面的 loaders 处理。

3. 创建 Sass 文件并在组件中使用

配置完成后，你就可以在 src 目录下创建 Sass 文件了。

• 创建样式文件 (src/components/Button/Button.scss):

  // 使用 Sass 变量和嵌套
  $button-bg-color: #61dafb;
  
  .btn {
    padding: 10px 20px;
    background-color: $button-bg-color;
    border: none;
    border-radius: 4px;
  
    &:hover {
      background-color: darken($button-bg-color, 10%);
    }
  }
  

• 在 React 组件中导入并使用 (src/components/Button/Button.js):

  import React from "react";
  // 直接导入 Sass 文件
  import "./Button.scss";
  
  const Button = ({ children }) => {
    // 直接使用定义好的类名
    return <button className="btn">{children}</button>;
  };
  
  export default Button;
  

进阶：使用 CSS Modules 避免样式冲突

在大型 React 15 项目中，为了避免全局样式污染，强烈建议结合 CSS Modules 使用。这需要稍微修改一下 Webpack 的配置。

1. 修改 Webpack 配置：
   你需要给 css-loader 添加 modules 配置项，让它开启 CSS Modules 功能。

   // webpack.config.js
   {
     test: /\.(scss|sass)$/,
     use: [
       'style-loader',
       {
         loader: 'css-loader',
         options: {
           modules: {
             // 配置生成的类名格式，方便调试
             localIdentName: '[path][name]__[local]--[hash:base64:5]',
           },
           importLoaders: 1, // 在 css-loader 前应用的 loader 数量
         },
       },
       'sass-loader'
     ]
   }
   

2. 在组件中使用：
   你需要将样式作为一个对象（styles）导入，然后通过对象属性的方式来引用类名。

   import React from "react";
   // 作为一个对象导入
   import styles from "./Button.module.scss";
   
   const Button = ({ children }) => {
     // 通过 styles 对象访问类名
     return <button className={styles.btn}>{children}</button>;
   };
   
   export default Button;
   

   采用这种方式，.btn 类名在最终编译时会变成一个唯一的哈希字符串（如 Button__btn--3Xq9a），从而完美避免不同组件间的样式冲突。

总结

在 React 15 项目中引入 Sass，本质上就是安装两个 npm 包，并告诉 Webpack 如何处理这类文件。虽然比现在的新项目多了一步手动配置，但步骤清晰，并不复杂。建议你优先尝试 CSS Modules 的方式，它能让你的样式管理更清晰、更健壮。