安装使用
在webpack中，所有预处理器都要匹配相应的loader,vue-loader允许其他的webpack-loader处理组件中的一部分代码，然后它根据lang属性自动判断出要使用的loaders。所以，其实只要安装处理sass/scss的loader。就能在vue中使用scss了。
现在我们来安装sass/scss loader
cnpm install sass-loader node-sass --save-dev
安装后,有的时候无需配置,vue-loader允许能根据lang属性自动判断出要使用的loaders;
如果不生效,则需要在webpack.base.conf.js中 rules增加以下配置.
{
test: /\.scss$/,
loaders: ["style","css","sass"]
},
然后使用的时候引入
@import "../static/css/user.css";
或者
<style scoped src="../../assets/pc/css/style.css"></style>
注意：
<style scoped src="../../assets/pc/css/style.css"></style> 在webpack.base.conf.js中没有配置rules，也是可以使用的；
使用区别
使用@import引入外部css，作用域是全局的
import并不是引入代码到<style></style>里面，而是发起新的请求获得样式资源，并且没有加scoped
<style scoped>
@import "../static/css/user.css";
</style>
我们只需把@import改成<style src=""></style>引入外部样式，就可以解决样式是全局的问题
<style scoped src="../static/css/user.css">
<style scoped>
.user-content{
background-color: #3982e5;
}
</style>