将 css 模块与提取文本插件一起使用

Question

Webpack 2 构建在生产模式下无法按预期工作，使用 css-loader 中的 CSS 模块选项和 extract-text-webpack-plugin。

在 HTML 元素上创建了正确的生成类，这意味着 css-loader 正在按预期工作，但从 extract-text-webpack-plugin 中提取的 CSS 文件缺少 CSS 标识符。

我正在使用一种同时实现全局 css 和 css 模块的方法，如下所述：https://github.com/css-modules/css-modules/pull/65 在这里：https://github.com/kitze/custom-react-scripts/issues/29。

我正在对以 .css 结尾的文件和以 .cssm 结尾的文件使用不同的加载器测试.css表明它们应该使用模块加载。

配置的相关部分：

const extractTextPlugin = new ExtractTextPlugin({filename: '[name].[id].[contenthash].css', allChunks: true});
return {
module: {
rules: [
{
test: /.cssm.(css|less)$/,
loader: extractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{
loader: 'css-loader',
query: {
importLoaders: 1,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
query: {
ident: 'postcss',
plugins: function() {
return [
require('autoprefixer')
];
}
}
},
{
loader: 'less-loader'
}
]
})
},
{
test: /.(css|less)$/,
include: paths,
loader: extractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
{
loader: 'css-loader',
query: {
importLoaders: 1
}
},
{
loader: 'postcss-loader',
query: {
ident: 'postcss',
plugins: function() {
return [
require('autoprefixer')
];
}
}
},
{
loader: 'less-loader'
}
]
})
}
]
},
plugins: [
extractTextPlugin
]
};

我尝试过建议的解决方案，例如使用 webpack 1 风格的编写加载器，但这没有帮助。

我正在使用网络包版本：2.6.1 和提取文本网络包插件：2.1.2。

我也尝试了其他版本，似乎也没有帮助。

我的全局 CSS 文件工作正常，只有导入的 .cssm.css 文件在与提取文本 Webpack-插件一起使用时被忽略。

如何解决其他全局css无法正确提取css模块文件的问题？

Answer 1

显然我的设置很好。问题是我没有在"入口"webpack 配置中包含我所有的样式(css/less(文件。该配置通过了构建阶段，但没有处理我在尝试将 css 模块与常规全局 css 一起使用时添加的新 .cssm.less 文件。

现在一切正常！为了将来参考，我将包括将 css 模块与全局 css 一起使用的更新配置(用于生产和开发(。显然，在较新版本的 webpack 和 extractTextPlugin 中，确切的语法("use" vs "loader"，"options" vs "query" 等(不再重要，并且是双向的。

对于生产，我将在"localIdentName"属性中的所有css模块类名上添加前缀cssm，以便以后可以使用PurifyCSSPlugin并将每个包含cssm的类列入白名单：

exports.setupSeparateStyles = function(paths, cssModulesPaths) {
const extractTextPlugin = new ExtractTextPlugin({
filename: '[name].[contenthash].css', 
allChunks: true
});
return {
module: {
rules: [
{
test: /.(css|less)$/,
include: paths,
exclude: /.cssm.(css|less)$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'less-loader'
]
})
},
{
test: /.(css|less)$/,
include: cssModulesPaths,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: 'cssm-[name]_[local]_[hash:base64:5]',
}
},
'postcss-loader',
'less-loader'
]
})
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require('autoprefixer')
]
}
}),
extractTextPlugin
]
};
};

对于开发来说，它要简单得多：

exports.setupInlineStyles = function (paths, cssModulesPaths) {
return {
module: {
rules: [
{
test: /.(css|less)$/,
include: paths,
exclude: /.cssm.(css|less)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader',
'less-loader'
]
},
{
test: /.(css|less)$/,
include: cssModulesPaths,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]_[local]_[hash:base64:5]'
}
},
'postcss-loader',
'less-loader'
]
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require('autoprefixer')
]
}
})
]
};
};