参考链接:https://www.hangge.com/blog/cache/detail_2543.html
1、安装依赖包
01、进入项目相应文件夹,执行如下两个命令安装相关的依赖包。
npm install --save-dev sass-loader
npm install --save-dev node-sass
02、 接着编辑 build 文件夹下的 webpack.base.conf.js 文件,在 rules 里面添加如下配置:
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
如图:
如果文件没有webpack.base.conf.js 文件
那么自己在项目最外层与package.json同级新建一个webpack.config.js且在此文件中加入如下内容:
module.exports={
module:{
rules:[
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
]
}
}
如图:
03、按以上步骤安装成功运行项目报错:Module build failed: TypeError: loaderContext.getResolve is not a function(此问题为版本过高问题)
运行:
npm uninstall sass-loader // 卸载当前版本
npm install sass-loader@7.3.1 --save-dev //安装新版本
npm run dev //重新运行项目
项目报错:Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.(此问题为版本过高问题)
运行:
npm uninstall node-sass //卸载已安装版本
npm install node-sass@4.14.1 //安装新版本
npm run dev //重新运行项目
1、使用示例
<!-- html -->
<template>
<div id="talentDevelopmentDetail">
<div class="header">
<span class="header-text flex-start">
<span>首页</span><img src="@/images/gray_right_arrow.png" alt="" class="tdd-gray-right-arrow">
<span>人才与文化</span><img src="@/images/gray_right_arrow.png" alt="" class="tdd-gray-right-arrow">
<span>游戏陀螺</span>
</span>
</div>
</div>
</template>
<script>
export default {
name: "talent-development-detail",
data() {
return {}
}
</script>
<style lang="scss" scoped>
// css(可用最外层div包裹住里面的样式类,这样可以避免vue的样式继承问题)
#talentDevelopmentDetail{
.header{
width:100%;
height:0.4rem;
line-height: 0.4rem;
background:rgba(241,242,244,1);
margin-top: 0.7rem;
}
.header-text{
padding-left: 15%;
font-size:0.12rem;
font-weight:400;
color:rgba(0,0,0,0.80);
}
}
</style>