Question

我在项目中使用的是Webpack（v4），Sass和Vue.js（v2）。

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

在其他情况下，我想将已编译的sass代码注入html标记中。（这是针对我的.vue单个文件组件中包含的）

是否可以同时拥有两个？我应该如何配置Webpack？

Answer 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

Answer 2

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

您必须离开webpack，将所有的scss文件编译成css的负担。然后，您选择提取它们还是将它们保留在html样式标签中。

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

Webpack，Vue.js和Sass的两个编译案例

3 个答案: