vue-cli 4 使用scss

2021-12-03 02:04:08

1、安装node-sass和sass-loader

npm install node-sass -D
npm install sass-loader -D

2、安装style-resources-loader和vue-cli-plugin-style-resources-loader

npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D

3. 在vue.config.js中使用

const path = require(‘path‘);
module.exports = {
    pluginOptions: {
        ‘style-resources-loader‘: {
            preProcessor: ‘scss‘,
            patterns: [
                path.resolve(__dirname, ‘./src/styles/variables.scss‘)
            ]
        }
    }
}

4. 重启项目

npm run dev

vue-cli 4 使用scss