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 文件內部的樣式最好嵌套使用，且根節點樣式名不能重複，不然就像下圖一樣，樣式會被覆蓋。