位置：广州松河 > 技术支持 > scss在Vue中的安装及使用

scss在Vue中的安装及使用

来源：网络整理时间：2023/2/14 1:03:57 共 3767 浏览

一、安装

    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中引入

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：使用vue-cli脚手架初始化Vue项目下的项目结构 | ·下一条：.net/C# 微信小程序如何生成二维码图片