隐藏

scss在Vue中的安装及使用

发布:2022/3/28 10:36:57作者:管理员 来源:本站 浏览次数:697

一、安装

    npm install node-sass --save-dev //安装node-sass
    npm install sass-loader --save-dev //安装sass-loader
    npm install style-loader --save-dev //安装style-loader 有些人安装的是 vue-style-loader 其实是一样的!

二、配置文件

在webpack.base.conf.js 文件下的配置 rules

    rules:[
    ...
    { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别scss!
        test: /\.scss?$/,
        loaders: ["style", "css", "sass"]
    }
    ]

在webpack.base.conf.js 文件下的配置 rules

三、在vue模板组件中引用lange="scss"

    <style lang="scss" scoped>
    ...
    </style>

style中引入