vue中使用sass

https://vue-loader.vuejs.org/zh/guide/pre-processors.html#sass

1.安装依赖

npm install -D sass-loader node-sass
或
npm install sass-loader node-sass  --save-dev

2.这个时候你打开build文件夹下面的webpack.base.config.js

module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
        },
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
        },
        {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
        },
        {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        },
        { //从这一段上面是默认的！不用改！下面是没有的需要你手动添加，相当于是编译识别sass! 
            test: /\.scss$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'sass-loader'
            ]
        }
    ]
}

3.在需要用到sass的地方添加lang = "scss"

<style lang="scss" scoped="" type="text/css"> 
    //你的sass语言 $primary-color: #333; 
    body {
        color: $primary-color; //编译后就成了 color:#333;类似于js的变量！ 
    } 
</style

4.解决sass-loader的版本过高导致的编译错误

Module build failed: TypeError: this.getResolve is not a function at Object.loader (E:\appEx\PreResearch\orchestrator\topology\node_modules\sass-loader\dist\index.js:52:26)
    
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-0b9912b5","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/module/customer/topology/topologyList.vue

解决办法：cd到项目文件里面运行下面
npm uninstall sass-loader（卸载当前版本）
npm install sass-loader@7.3.1 --save-dev

5.分离css文件

// 使用css
<style scoped >
    @import 'Home.css'
</style>
//使用sass
<style scoped lang="scss">
    @import "../css/style.scss";
</style>