Прежде всего, скажи, что я новичок в сети.У меня есть несколько сайтов с общей конфигурацией CSS, но у каждого есть свои настройки;в частности, все они импортируют определенные общие файлы, и каждый импортирует свои собственные файлы цветов и частные правила.
Это моя структура scss:
- scss/
|- _component.scss
|- [...]
|- _utilities.scss
|- main.scss
|- site1/
|- _colors.scss
|- _private.scss
|- site2/
|- _colors.scss
|- _private.scss
это желаемое содержимое для main.scssfile:
@import "./{{site}}/colors";
@import "settings";
[...]
@import "utilities";
@import "./{{site}}/private";
, и это часть моего webpack.config.js:
module.exports = {
plugins: {
[new MiniCssExtractPlugin({
filename: 'css/[name].bundle.css'
})],
entry: {
site1: path.resolve('scss/main.scss'),
site2: path.resolve('scss/main.scss')
},
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'resolve-url-loader',
'sass-loader',
{
loader: 'string-replace-loader',
options: {
search: '{{site}}',
replace: '[name]'
}
}
]
}
]
}
}
Что я намерен добиться, это заменить строку {{site}} (или любуюдругой шаблон) со значением заполнителя [name] в файле main.scss перед обработкой sass-loader:
@import "./site1/colors";
@import "settings";
[...]
@import "utilities";
@import "./site1/private";
Возможно ли это?Спасибо!