在使用vue-cli等脚手架初始化项目之后,css-loader和vue-style-loader就默认装好了,如果我们要在vue组件中使用sass应该这么做呢?
首先需要安装node-sass和sass-loader
npm install node-sass --save-dev --no-optional
npm install sass-loader --save-dev --no-optional
–no-optional参数的用法在我的另外一篇博客中有详细说明。
之后在build文件夹下的webpack.base.conf.js中配置新的rules
{
test:/\.scss$/,
loader:"vue-style-loader!css-loader!sass-loader"
}
目前,所需要的模块就已经安装好了,现在这里有一个vue组件——App.vue
<template>
<div id="app">
<v-header></v-header>
<div class="tab">
<div class="tab-item">
商品
</div>
<div class="tab-item">
评论
</div>
<div class="tab-item">
商家
</div>
</div>
<div class="content">
i am content
</div>
</div>
</template>
<script>
//js相关代码
</script>
<style lang="scss" rel="text/css">
#app{
color:red;
.tab{
display: flex;
}
}
</style>
这里我们只看与sass有关的代码,此时需要在style标签中设置lang="scss" rel="text/css"
,之后我们npm run dev看一下效果
样式已经生效了,但我们可以发现.tab下面的样式中多出了两条被删除的样式,这是因为在初试话项目的时候,webpack已经为我们配置好了autoprefixer。postcss等模块,这些模块可以使css样式兼容低版本浏览器,这样我们敲起项目来就会非常方便。