vue js 将scss编译成css

【问题标题】：vue js compile scss to cssvue js 将scss编译成css
【发布时间】：2021-08-16 09:48:03
【问题描述】：

我有一个带有 scss 文件的 vue js 项目。

我想把scss文件编译成css放到public文件夹里。

请问我该怎么做？

vue.config.js

const path = require('path');

module.exports = {
    chainWebpack: config => {
        config.entry('theme')
            .add('./src/assets/app.scs')
            .end();
    },
    css: {
        extract: {
            filename: 'app.css',
            chunkFilename: 'css/app.css'
        },
        modules: false,
        sourceMap: true
    },
    configureWebpack: {
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src')
            }
        }
    }
};

谢谢

【问题讨论】：

标签： css vue.js sass

【解决方案1】：

由于你使用Webpack，我认为你最好的选择是使用带有特定选项的vue-loader + sass-loader来提取编译后的css。

vue-loader 负责将您的单个文件组件（.vue 文件）拆分为 HTML/脚本/样式，并将每个部分提供给正确的加载器。
sass-loader（与 dart-sass 一起使用）会将您的 sass 编译为 css。
使用MiniCssExtractPlugin指定提取最终css的位置：https://webpack.js.org/loaders/sass-loader/#extracts-css-into-separate-files

【讨论】：