Question

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

由于我将bulma用作css框架，因此我的所有样式都与：

theme-1.scss

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

当前解决方案只是具有默认webpack配置的自举式Vue应用程序。我唯一能够将CSS构建为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

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

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

给MiniCSSExtractPlugin的设置配置一个审查。 MiniCSSExtractPlugin非常好，因此要注意的最重要的一点是，您缺少css-loader（应该使用它而不是file-loader）。

Answer 2

以下是此问题的解决方案：

在我的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
    },
}

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

2 个答案: