在react中配置less

作者: GC风暴 | 来源:发表于2020-01-06 18:04 被阅读0次

    1. 创建React 工程

    npx create-react-app my-app
    

    2.添加lessless-loader 两个依赖库

    npm install less@3.9.0
    
    npm install less-loader@4.1.0
    

    注意:

    如果步骤3 在步骤2前先执行,则需要【删除】项目中的package-lock.json后, 重新执行步骤2即可。

    3. 弹出配置文件以便自定义项目配置

    npm run eject
    

    4. 打开config/webpack.config.js 文件,开始配置工作

    修改style files regexes(样式文件正则)
    参照 sass 配置 less 的样式文件正则

    image.png
    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    

    5.修改getStyleLoaders函数,并添加如下代码

    同样,参照css-loader节点,添加less-loader节点

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

    6.模仿代码中提供的sassRegex代码,添加如下代码

    image.png
                // Adds support for LESS Modules, but using LESS 
                // less start
                {
                  test: lessRegex,
                  exclude: cssModuleRegex,
                  use: getStyleLoaders({
                    importLoaders: 1,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                  }),
                  sideEffects: true,
                },
                {
                  test: lessModuleRegex,
                  use: getStyleLoaders({
                    importLoaders: 1,
                    sourceMap: isEnvProduction && shouldUseSourceMap,
                    modules: true,
                    getLocalIdent: getCSSModuleLocalIdent,
                  }),
                }, // less end;
    

    参考:在react中配置less

    相关文章

      网友评论

        本文标题:在react中配置less

        本文链接:https://www.haomeiwen.com/subject/klgbnctx.html