vue-cli4安装sass

vue-cli4安装scss
技术交流QQ群1093476453

1.安装依赖包

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

2.vue.config.js配置文件中配置css

module.exports = {
   css: {
     loaderOptions: {
        sass: {
            additionalData:`@import "./src/assets/scss/style.scss";` 
            }
        }
    }
}

• sass 版本 9以上的版本 中使用 additionalData
• 8版本 中使用 prependData

3.在 src->assets文件夹里面创建 scss文件夹 在scss文件夹里面创建style.scss文件

例如

4.重启服务 在需要设置全局样式的地方引入，注意设置style lang=“scss”

<style scoped lang="scss">
    .header{
        padding: 20px;
        .list{
            font-weight: bold;
            li{
                float: left;
                width: 25%;
                text-align: center;
                .price{
                    font-size: 30px;
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>

5.大工告成