vue scss引用（完美解决vue样式继承问题）

参考链接: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>