1.安装依赖
安装 node-sass sass-loader 需要指定对应版本 ,否则会报错
npm install sass-loader@7.3.1 node-sass@4.14.1 --save-dev
在 组件中使用
<style lang='scss' scoped>
.home {
.item {
width: 100px;
height: 100px;
border: 1px solid red;
}
}
</style>
2.使用sass 全局变量
在src目录下创建style文件夹 新建common.scss
$main-color: red;
在 vue.config.js 中引用
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "./src/style/common";`,
},
},
},
}