如果在创建项目没有选择CSS 预处理器,我们也可以手动安装sass-loader node-sass来集成scss。
npm install -D sass-loader node-sass
这时候安装完就可以在组件中使用scss
了。
<style scoped lang="scss">.wrap {
h1{
color:blue;
}
}
</style>
引入SCSS全局变量
_variable.scss
$color-theme:#498eff;
如果想要使用scss
变量的话,需要对配置文件做如下修改
vue service clie会自动使用我们安装的sass-loader作为scss内容的加载器。vue cli是基于webpack构建项目,如果想对sass-loader传递一些配置项,可以在vue.config.js配置。在项目的根目录下如果没有找到vue.config.js,手动创建即可。如下:
// vue.config.jsconst fs = require('fs')
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/assets/scss/_variable.scss";`
}
}
}
}
这个文件variables.scss也是可以通过import在.vue组件里引入。
修改完配置文件记得重启下项目,接下来就可以使用scss
变量,函数等功能了。
<style scoped lang="scss">.wrap {
h1{
color:$color-theme;
}
}
</style>
还没有评论,来说两句吧...