React里使用Sass

发表于 更新于
本文字数： 962 阅读时长 ≈ 2 分钟

现状

  1. React官方推荐的CSS写法是CSS in JS
  2. CSS in JS的写法，在开发上就不是很友好，而且有伪类处理复杂，动画不好写等问题
  3. 配置好webpack 的 css-loader 就能愉快的使用Sass
  4. 为了避免全局污染，一般会约定每个样式文件只能有一个顶级类（DOM的class属性）

React项目里使用Sass并引用JS变量的方法

引用JS变量在CSS in JS里并不稀奇，但是在Sass里要怎么做呢

  1. 把变量写入一个文件：
1
2
3
4
5
6
7
8
9
// src/styles/variables.js
module.exports = {
  // 主颜色
  'primary-color': '#0C4CFF',
  // 出错颜色
  'error-color': '#F15533',
  // 成功颜色
  'success-color': '#35B34A',
};

  1. 在Webpack添加配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // webpack.config.js
    const styleVariables = require('src/styles/variables');

    // ...
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader?sourceMap&minimize',
        {
          loader: 'sass-loader',
          options: {
            data: Object.keys(styleVariables)
              .map(key => `\$${key}: ${styleVariables[key]};`)
              .join('\n'),
            sourceMap: true,
            sourceMapContents: true
          }
        }
      ]
    }
    //...

  2. 之后在scss文件里就可以直接引用变量：

    1
    2
    3
    4
    // page.scss
    .button {
      background: $primary-color;
    }