react scss 使用方式

目前有2种使用方式

方式1：根据文件路径编译样式

webpack 配置如下：

     {
        test: /\.s[ac]ss$/i,
        include: root('src'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              minimize: false,
              importLoaders: 1,
              localIdentName: '[path][name]__[local]',
              modules: true,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },

使用方法如下：

import styles from './index.scss';

<div className={styles.test}>
</div>

编译结果：

class="src-core-layouts-Base-index__test"

src-core-layouts-Base 是path,index是name,test是scss里面定义的样式

方式2：直接编译样式，需要注意作用域覆盖问题

webpack 配置如下：

   {
        test: /\.s[ac]ss$/i,
        include: root('src'),
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },

使用方法如下：

import './index.scss';

<div className='test'>
</div>

编译结果：

class="test"

使用这种方式的话，scss 文件内部的样式最好嵌套使用，且根节点样式名不能重复，不然就像下图一样，样式会被覆盖。

覆盖