react配置 less sass css 样式模块化 webpack4

脚手架创建项目后，先运行eject打开引擎盖

config文件目录下webpack.config.js

实际上,脚手架已经给我们配置了css和scss语法的模块化

如果需要启用sass 虽然默认配置了sass，但是还是需要下解析器

npm i node-sass 

下载完成后，使用方式

注意文件名称必须以.module.scss

使用方式

QIAN

一样是使用嵌套规则

貌似写标签是没法模块化的，只模块化id和class

 

 类名是这样子了，就表示使用正确了

 

 

接下来是less的配置

开盖后，也是下less的解析包

npm i less-loader

仿照sass的配置的格式再来一遍

// less
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$

 找到另外一处配置项

const getStyleLoaders = (cssOptions, lessOptions, preProcessor)

添加lessOptions

模仿添加less配置

//新增这一行代码
      {
        loader: require.resolve('less-loader'),
        options: lessOptions
      },

 找到sass的另一处配置，再模仿添加less的

注意webpack的版本不同，可能sass模块的配置也不一样，但是可以完全仿照，更改配置名就行了

{
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap
                },
                'less-loader'
              ),
              sideEffects: true
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent
                  }
                },
                'less-loader'
              )
            },

配置完成后，使用的方式和sass的使用方式完全一模一样,css模块化默认已经开启了，跟sass演示的也一样