Использование модулей CSS с плагином Extract Text
Сборка Webpack 2 не работает должным образом в производственном режиме с использованием опции css modules в css-loader с extract-text-webpack-plugin.
правильные сгенерированные классы создаются на html-элементах, подразумевая, что css-загрузчик работает как задумано, но извлеченному файлу css из extract-text-webpack-plugin не хватает идентификаторов 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, но это не помогло.
Я использую версию webpack: 2.6.1 и extract-text-webpack-plugin: 2.1.2.
Я также пробовал другие версии, которые тоже не помогли.
Мои глобальные CSS-файлы работают нормально, только импортированные файлы.cssm.css игнорируются при использовании с extract-text-webpack-plugin.
Как я могу решить проблему с тем, что файлы модуля css не извлекаются должным образом с другими глобальными css?
1 ответ
Видимо, мои настройки были в порядке. Проблема заключалась в том, что я не включил все свои файлы стилей (css / less) в конфигурацию веб-пакета "entry". Конфигурация прошла этап сборки, но не обработала новые файлы.cssm.less, которые я добавил, пытаясь использовать модули css вместе с обычным глобальным css.
Теперь все работает! Для дальнейшего использования я включу мою обновленную конфигурацию для использования модулей CSS с глобальным CSS (для производства и разработки). Очевидно, что в более новых версиях webpack и extractTextPlugin точный синтаксис ("использовать" против "загрузчик", "параметры" против "запросить" и т. Д.) Больше не имеет значения и работает в обоих направлениях.
Для производства я добавляю префикс cssm ко всем именам классов моих модулей css в свойстве localIdentName, чтобы позже я мог использовать 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')
]
}
})
]
};
};