在vue+webpack中使用sass

WEB前端 waitig 432℃ 百度已收录 0评论

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


本文由【waitig】发表在等英博客
本文固定链接:在vue+webpack中使用sass
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)