babel-plugin-react-css-modules 错误

858 阅读1分钟

第一个问题

当按照github上的文档安装babel-plugin-react-css-modules的时候,会一直提示Class extends value undefined is not a structor or null

图片.png

这里是主要因为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不起作用,表现如下:

图片.png 第一个类名是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',

},

],