在vue+webpack中使用sass

在使用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样式兼容低版本浏览器，这样我们敲起项目来就会非常方便。