使用 Webpack、Vue.js 和 Sass 的两个编译案例答案

【问题标题】：Two compile cases with Webpack, Vue.js, and Sass使用 Webpack、Vue.js 和 Sass 的两个编译案例
【发布时间】：2018-09-11 10:29:40
【问题描述】：

我在我的项目中使用 Webpack (v4)、Sass 和 Vue.js (v2)。

在某些情况下，我想将 sass 代码编译成 .css 文件。（这是针对 webpack.config.js 中作为“入口”点提到的 .scss 文件）

在其他一些情况下，我希望将编译后的 sass 代码注入到 html 标记中。（这是针对我的 .vue 单文件组件中包含的<style lang="sass">）

可以同时拥有吗？我应该如何配置 Webpack？

【问题讨论】：

标签： vue.js webpack sass

【解决方案1】：

您可以使用 sass-loader 在任何地方包含 scss 文件并编译它们： https://github.com/webpack-contrib/sass-loader

要将 scss 包含在单个文件组件中，您无需执行任何特定操作，只需将样式写入指定 lang="scss" 的样式标记即可。

以下是这两种情况的详细示例： https://medium.com/hong-kong-tech/use-sass-scss-of-webpack-in-vuejs-8dde3a83611e

【讨论】：

我认为这不能回答我的问题。我知道如何将编译后的代码注入到
“我知道如何将编译后的代码注入到

【解决方案2】：

您只能将 scss 文件留给 webpack 处理。您不能在构建期间处理它们并将它们注入到您的单个组件中，如此处所述“在其他一些情况下，我希望将编译后的 sass 代码注入到 html 标记中。（这是包含在我的.vue 单个文件组件）”。

你必须把所有的 scss 文件编译成 css 的负担留给 webpack。然后您选择提取它们或将它们留在 html 样式标签中。

【讨论】：

【解决方案3】：

抱歉，PlayMa256 和 Máté 这么久才回复您的回复。最后，我找到了为我的两个案例使用两种不同配置的解决方案。 Webpack 允许它通过其multi-compiler feature。

这就是我的 webpack.config.js 现在的样子：

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: [ /* ... */]
    }
];

【讨论】：