vue-cli4全局安装scss
第一步:打开package.json中确认你的项目中是否集成了sass相应的"node-sass"和"sass-loader"两个包,如果在创建项目的时候选择了CSS预处理那个选项,则项目中就会有这两个包,没有就按照以下命令安装npm install node-sass --save-devnpm install sass-loader --save-dev第二步vue.config.j...
·
第一步:
打开package.json中确认你的项目中是否集成了sass相应的"node-sass"和"sass-loader"两个包,如果在创建项目的时候选择了CSS预处理那个选项,则项目中就会有这两个包,没有就按照以下命令安装
npm install node-sass --save-dev
npm install sass-loader --save-dev
第二步
vue.config.js配置文件中配置css
module.exports = {
css: {
loaderOptions: {
sass: {
prependData:`@import "./src/assets/scss/style.scss";`
// sass 版本 9 中使用 additionalData 版本 8 中使用 prependData
}
}
}
}
注意点:1.vue.config.js项目里没有这个文件,可以手动配置。放在根目录下可以被自动加载;2.修改vue.config.js文件后一定要重新启动服务npm run serve
第三步
在需要设置全局样式的地方引入,注意设置style lang=“scss”
<style lang="scss">
#app {
color: $color;
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)