react customize-cra 配置less modules_customize-cra rules-优快云博客

查看网上，基本上都是eject，把webpack爆露出来更改，但是人家不建议这么做。。。

然后又说create-react-app 4.0以上版本包含了css modules，直接把文件改成XXX.module.less，就可以使用less modules了，但是，每次都会说找不到XXX.module.less，后说，

addLessLoader里面设置cssModules的getLocalIdent属性，但是也是会报options has an unknown property 'localIdentName'. These properties are valid，然后我就想，本来他就是要把less modules 放在config.module.rules里，在config里设置不就好了，废话不多说....

....

const {override, fixBabelImports, addLessLoader, addWebpackAlias} = require('customize-cra');

const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent'); // 直接这么引入就可以，他在create-app-react包里 这个就是getLocalIdent属性要设置的值

...

const getStyleLoaders = (cssOptions, preProcessor, lessOptions) => { // 这个是use里要设置的，封装了下
  const loaders = [
    require.resolve('style-loader'),
    {
      loader: require.resolve('css-loader'),
      options: cssOptions
    },
    {
      // Options for PostCSS as we reference these options twice
      // Adds vendor prefixing based on your specified browser support in
      // package.json
      loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009'
            },
            stage: 3
          })
        ]
      }
    }
  ];
  if (preProcessor) {
    loaders.push({
      loader: require.resolve(preProcessor),
      options: lessOptions
    });
  }
  return loaders;
};

...

module.exports = override(

addLessLoader({
  javascriptEnabled: true,
  modifyVars: {'@primary-color': '#16a951'},
  sourceMap: false
}),

(config)=>{
...

 // 增加处理less module配置 customize-cra 不提供 less.module 只提供css.module
  const oneOf_loc= config.module.rules.findIndex(n=>n.oneOf) // 这里的config是全局的
  config.module.rules[oneOf_loc].oneOf=[
    {
      test: /\.module\.less$/,
      use: getStyleLoaders(
        {
          importLoaders: 2,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent
          }
        },
        'less-loader'
      )
    },
    ...config.module.rules[oneOf_loc].oneOf
  ]

  return config
}

yarn start就可以了

然后使用的时候把原来的less文件改成.module.less 然后在引入文件处改成 import Style from 'XXX.module.less' < div className={Style.styleName}></div>

若一个元素上既有局部样式又有公共样式则<div className={`globalStyle ${Style.styleName}`}></div>

就ok了，希望可以帮到大家