查看网上,基本上都是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了,希望可以帮到大家