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-Basepath,indexname,testscss里面定义的样式

方式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 文件内部的样式最好嵌套使用,且根节点样式名不能重复,不然就像下图一样,样式会被覆盖。

覆盖

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):