Answer the question
In order to leave comments, you need to log in
How to collect less styles from vue components twice under different sets of less variables?
I have a project in vue. The component approach is used and the styles of each component are stored in the component itself (there is no separation into separate files for layout, scripts and styles, everything is in a .vue file) less. The assembly of component styles itself occurs at the stage of vue-loader operation inside the loader for less, where the styles are taken out to a separate file through ExtractTextWebpackPlugin. At the same stage, a file with variable styles is added via style-resources-loader
module.exports = {
...
module: {
rules: [
...
{
test: /\.vue$/,
use: [
{
loader: 'vue-loader',
options: {
preserveWhitespace: false,
loaders: {
less: ExtractTextWebpackPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'less-loader',
{
loader: 'style-resources-loader',
options: {
patterns: [
path.resolve(__dirname, 'path/to/less/variables.less'),
],
},
},
],
}),
},
},
},
],
},
],
},
...
plugins: [
...
new ExtractTextWebpackPlugin({
filename: 'styles/style.css',
}),
],
};
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question