美文网首页
create-react-app配置less环境

create-react-app配置less环境

作者: 阿炎 | 来源:发表于2021-05-23 20:31 被阅读0次

    create-react-app配置less环境

    最近使用react搭建一个私人项目,css解决方案采用less+css module,项目脚手架采用create-react-app
    利于脚手架生成项目后,发觉less无法直接使用,参考网上教程,需对项目进行配置,配置方式有两种:

    • 通过cra自带的npm run eject暴露出项目配置文件,然后在配置文件中对webapck配置进行更改。
    • 通过react-app-rewired对cra项目配置进行重写

    第二种方式显得更为优雅点,具体配置方法如下:

    安装react-app-rewired及customize-cra

    npm install customize-cra react-app-rewired --dev
    

    创建config-overrides.js文件

    项目根目录下创建config-overrides.js文件
    添加文件内容

    const { override, addLessLoader, fixBabelImports } = require("customize-cra");
    module.exports = override(
      addLessLoader({
        strictMath: true,
        noIeCompat: true,
        modifyVars: {
          "@primary-color": "#1DA57A", // for example, you use Ant Design to change theme color.
        },
        cssLoaderOptions: {}, // .less file used css-loader option, not all CSS file.
        cssModules: {
          localIdentName: "[path][name]__[local]--[hash:base64:5]", // if you use CSS Modules, and custom `localIdentName`, default is '[local]--[hash:base64:5]'.
        },
      }),
      fixBabelImports("import", {
        libraryName: "antd",
        style: "css",
      })
    );
    

    addLessLoader方法即为配置less环境的配置方法,需要注意的是cssModules的文件格式,上述配置表示只有less文件名为*.module.lesscss module才会起效,大家有兴趣可以尝试不同的文件命名,import后通过console.log打印出对象看下效果。

    相关文章

      网友评论

          本文标题:create-react-app配置less环境

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