Is it possible to just compile SCSS to CSS in vue app? - vue.js

Question

I'm trying to use some dynamic styling in my Vue.JS application. The idea is to build SCSS themes to static CSS and use it as in my template to switch themes.
Since I'm using bulma as css framework all my styles look the same as:
theme-1.scss
$primary: wheat;
#import 'bulma/bulma';
The current solution is just a bootstrapped vue application with default webpack config. The only time I was able to build scss to css and use it further was the following config:
const path = require('path');
module.exports = {
mode: 'development',
entry: {
functions: [
'./src/index.js',
'./src/scss/theme1.scss',
'./src/scss/theme2.scss'
],
},
output: {
path: path.resolve(__dirname, 'src'),
filename: 'dist/js/[name].js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: 'dist/css/[name].css',
}
},
{
loader: 'sass-loader'
}
]
}
]
},
};
Unfortunately I can't use multiple entries in vue app. And it also seems to me is not the right way to work with single page application
Since i'm absolutely new to webpack and vue-loader I think that I do everything wrong and think in the wrong way. Maybe some plugin exists which do definitely the same thing as I want to?

Answer 1

Here is the solution for this issue:
in my vue.config.js I made the following:
module.exports = {
chainWebpack: config => {
config.entry('theme') // you can add here as much themes as you want
.add('./src/theme.scss')
.end();
},
css: {
extract: {
filename: '[name].css', // to have a name related to a theme
chunkFilename: 'css/[name].css'
},
modules: false,
sourceMap: true
},
}

Answer 2

I've typically not used file-loader in my CSS setup; instead I've always used a style-loader, css-loader with MiniCSSExtractPlugin:
https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example
Give that setup configuration for MiniCSSExtractPlugin a review.
MiniCSSExtractPlugin is a nice to have, so the most important thing to note is that you are missing the css-loader (which should be used instead of file-loader).