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

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
    },
}