Two compile cases with Webpack, Vue.js, and Sass

Question

I'm using Webpack (v4), Sass and Vue.js (v2) in my project.

In some cases, I'd like to compile sass code into .css files. (This is for the .scss files that are mentioned in webpack.config.js as "entry" points)

In some other cases I'd like to have the compiled sass code injected into a html tag. (This is for the <style lang="sass"> included in my .vue single file components)

Is it possible to have both at the same time? How should I configure Webpack?

Answer 1

You can use sass-loader to include scss files anywhere and compile them: https://github.com/webpack-contrib/sass-loader

To include scss in a single-file-component, you don't have to do anything specific, just write your styles into a style tag specifying lang="scss".

Here is a detailed example for both cases: https://medium.com/hong-kong-tech/use-sass-scss-of-webpack-in-vuejs-8dde3a83611e

Answer 2

You can only leave scss files for webpack to process. You can't get them processed during build time and inject them into your single components, as stated here "In some other cases I'd like to have the compiled sass code injected into a html tag. (This is for the included in my .vue single file components)".

You have to leave to webpack the burden to compile all your scss files into css. Then you choose to either extract them or leave them in the html style tag.

Answer 3

Sorry PlayMa256 & Máté, for being so long before answering your replies. In the end I found the solution of using two different configurations for my two cases. Webpack allows it through its multi-compiler feature.

So here is what my webpack.config.js now looks like:

module.exports = [ // notice that we are handling an array of configurations here

    // In this first config, I manage the first of my use cases: 
    // Compilation of .scss files into .css files
    {
        name: "css",
        entry: { /* ... */ },
        output: { /* ... */ },
        /* ... */
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader' ],
                }
            ]
        },
        plugins: [ /* ... */]
    },

    // In this other config, I manage the other of my use cases: 
    // injection of the <style> blocks of my .vue files into the DOM
    {
        name: "main", // name for first configuration
        entry: { /* ... */ },
        output: { /* ... */ },
        /* ... */
        module: {
            rules: [
                // Vue single file components loader
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                },

                // Injection of <style> elements into the DOM,
                // for both plain `.css` files and `<style>` blocks in `.vue` files
                {
                    test: /\.css$/,
                    use: [
                      'vue-style-loader',
                      'css-loader'
                    ]
                },

                // Compilation of sass code,
                // (This actually works both for `.css` files and `<style>` blocks in `.vue` files, 
                // but I don't have any `.css` as entry for this config.)
                {
                    test: /\.scss$/,
                    use: [
                        "style-loader", // creates style nodes from JS strings
                        "css-loader", // translates CSS into CommonJS
                        "sass-loader" // compiles Sass to CSS, using Node Sass by default
                    ]
                }
            ]
        },
        plugins: [ /* ... */]
    }
];