是否可以在 vue 应用程序中将 SCSS 编译为 CSS？

Question

我正在尝试在我的 Vue.JS 应用程序中使用一些动态样式。这个想法是将 SCSS 主题构建为静态 CSS，并在我的模板中使用它来切换主题。

因为我使用 bulma 作为 css 框架，所以我的所有样式看起来都一样：

theme-1.scss

$primary: wheat;
@import 'bulma/bulma';

当前的解决方案只是一个带有默认 webpack 配置的引导式 vue 应用程序。我唯一一次能够将 scss 构建为 css 并进一步使用它是以下配置：

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'
                    }
                ]
            }
        ]
    },
};

不幸的是，我不能在 vue 应用程序中使用多个条目。而且在我看来，这也不是使用单页应用程序的正确方法

由于我对 webpack 和 vue-loader 完全陌生，所以我认为我做错了所有事情并且以错误的方式思考。也许存在一些与我想做的事情完全一样的插件？

Answer 1

这里是这个问题的解决方案：

在我的 vue.config.js 中，我做了以下内容：

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

我通常不会在我的 CSS 设置中使用文件加载器；相反，我一直使用带有 MiniCSSExtractPlugin 的样式加载器、css-loader：

https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example

检查 MiniCSSExtractPlugin 的设置配置。 MiniCSSExtractPlugin 很好用，所以最需要注意的是你缺少 css-loader（应该使用它而不是 file-loader）。