第一个问题
当按照github上的文档安装babel-plugin-react-css-modules的时候,会一直提示Class extends value undefined is not a structor or null
这里是主要因为github的文档里边少了一个npm包,必须同时安装postcss
npm install postcss postcss-scss --save-dev
第二个问题
webpack的css-loader、babel-plugin-react-css-modules中生成的hash不一样,出现的情况就是css-loader生成的类名和babel-plugin-react-css-modules生成的类名不一致,导致写的css不起作用,表现如下:
第一个类名是css-loader生成的,第二个类名是babel-plugin-react-css-modules生成的,这样就导致当我们使用styleName的时候,生成的类名无法获取到我们设置的样式。
原因: 去搜索了下,应该是最新版的css-loader6.2.0使用了新的hash算法,所以导致两者的生成的hash不一致
解决: 在webpack.config.js中使用"generic-names": "^3.0.0", 生成类名,在babel.config.js中使用生成类名,也就是通过generic-names让两者达成一致。
webpack.config.js 配置如下:
const genericNames = require('generic-names');
const generateScope = genericNames(localIdentName, {
context: process.cwd(),
});
const getStyleLoaders = (cssOptions, preProcessor = []) => {
const loaders = [
// require.resolve('style-loader'),
MiniCssExtractPlugin.loader,
// isProd ? MiniCssExtractPlugin.loader : require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: cssOptions,
},
];
if (preProcessor.length > 0) {
for (let item of preProcessor) {
loaders.push(require.resolve(item));
}
}
return loaders;
};
{
test: /\.scss$/,
exclude: /node_modules/,
include: path.resolve(__dirname, 'src'),
use: getStyleLoaders(
{
importLoaders: 1,
// modules: {
// localIdentName: '[name]__[local]_[hash:base64:5]',
// localIdentContext: path.resolve(__dirname, 'src'),
// },
modules: {
getLocalIdent({ resourcePath }, localIdentName, localName) {
return generateScope(localName, resourcePath);
},
},
},
['sass-loader']
),
},
babel.config.js 配置如下:
const genericNames = require('generic-names'); // v3.0.0
// babel-plugin-react-css-modules
[
'react-css-modules',
{
generateScopedName: genericNames('[name]__[local]_[hash:base64:5]'),
filetypes: {
'.scss': {
syntax: 'postcss-scss',
},
},
exclude: 'node_modules',
},
],