react 中使用less

清疚 2023-07-06 11:40 10阅读 0赞

首先 npm install less-loader less --save -dev

安装之后终端

npm run eject 来暴露webpack的配置文件，如果报错：

### Remove untracked files, stash or commit any changes, and try again. ###

这是因为我们使用脚手架创建一个项目的时候，自动给我们增加了一个.gitignore文件，而我们本地却没有文件仓库。

这就需要在终端输入如下命令：

git add .

git commit -m 'init'

再执行 npm run eject

你会发现多了config为名的文件夹。

最后是我们需要手动在webpack.config.js里配置less

const cssRegex = /\.css$/;
    const cssModuleRegex = /\.module\.css$/;
    const sassRegex = /\.(scss|sass)$/;
    const sassModuleRegex = /\.module\.(scss|sass)$/;
    //新增
    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;

找到此处代码：

{
          test: cssModuleRegex,
          use: getStyleLoaders({
          importLoaders: 1,
          sourceMap: isEnvProduction && shouldUseSourceMap,
          modules: {
          getLocalIdent: getCSSModuleLocalIdent,
             },
       }),
    },

下面紧接着做如下配置：

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

找到 getStyleLoaders 函数，做如下配置：参数lessOptions和

\{  
loader: require.resolve('less-loader'),  
options: lessOptions,  
\},

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][]

const getStyleLoaders = (cssOptions, lessOptions,preProcessor) => {
        const loaders = [
          isEnvDevelopment && require.resolve('style-loader'),
          isEnvProduction && {
            loader: MiniCssExtractPlugin.loader,
            // css is located in `static/css`, use '../../' to locate index.html folder
            // in production `paths.publicUrlOrPath` can be a relative path
            options: paths.publicUrlOrPath.startsWith('.')
              ? { publicPath: '../../' }
              : {},
          },
          {
            loader: require.resolve('css-loader'),
            options: cssOptions,
          },
          {
            loader: require.resolve('less-loader'),
            options: lessOptions,
          },

重启终端即可使用

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200218122732331.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70