npm install --save-dev sass-loader

//sass-loader依賴于node-sassnpm install --save-dev node-sass

{  test: //.sass$/,  loaders: ['style', 'css', 'sass'] } 

<span style="color:#454545;">// module用來解析不同的模塊 module: {  rules: [   ...(config.dev.useEslint ? [createLintingRule()] : []),   {    test: //.vue$/,    // 也就是說，對.js和.vue文件在編譯之前進行檢測，檢查有沒有語法錯誤'eslint-loader'    // enforce: 'pre'選項可以確保，eslint插件能夠在編譯之前檢測，如果不添加此項，就要把這個配置項放到末尾，確保第一個執(zhí)行    // 對vue文件使用vue-loader，該loader是vue單文件組件的實現(xiàn)核心，專門用來解析.vue文件的    loader: 'vue-loader',    // 將vueLoaderConfig當做參數(shù)傳遞給vue-loader,就可以解析文件中的css相關文件    options: vueLoaderConfig   },   {    test: //.js$/,    // 對js文件使用babel-loader轉碼,該插件是用來解析es6等代碼    loader: 'babel-loader',    // 指明src和test目錄下的js文件要使用該loader    include: [resolve('src'), resolve('test')]   },   {    test: //.(png|jpe?g|gif|svg)(/?.*)?$/,    // 對圖片相關的文件使用 url-loader 插件，這個插件的作用是將一個足夠小的文件生成一個64位的DataURL    // 可能有些老鐵還不知道 DataURL 是啥，當一個圖片足夠小，為了避免單獨請求可以把圖片的二進制代碼變成64位的    // DataURL，使用src加載，也就是把圖片當成一串代碼，避免請求，神不神奇？？    loader: 'url-loader',    options: {     // 限制 10000 個字節(jié)一下的圖片才使用DataURL     limit: 10000,     name: utils.assetsPath('img/[name].[hash:7].[ext]')    }   },   {    test: //.(mp4|webm|ogg|mp3|wav|flac|aac)(/?.*)?$/,    // 字體文件處理，和上面一樣    loader: 'url-loader',    options: {     limit: 10000,     name: utils.assetsPath('media/[name].[hash:7].[ext]')    }   },   {    test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,    loader: 'url-loader',    options: {     limit: 10000,     name: utils.assetsPath('fonts/[name].[hash:7].[ext]')    }   },    </span><span style="color:#ff0000;">{      test: //.sass$/,      loaders: ['style', 'css', 'sass']    }</span><span style="color:#454545;">  ] },</span>

<style lang="scss">

<template>  <div id="indexContent">    <v-header></v-header>    <div class="tab">      <div class="tab-item">        <!-- 使用 router-link 組件來導航. -->        <!-- 通過傳入 `to` 屬性指定鏈接. -->        <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 -->        <router-link to="/foods">商品</router-link>      </div>      <div class="tab-item">        <router-link to="/rating">評論</router-link>      </div>      <div class="tab-item">        <router-link to="/seller">商家</router-link>      </div>    </div>    <!-- 路由出口 -->    <!-- 路由匹配到的組件將渲染在這里 -->    <router-view></router-view>  </div></template><script type="text/ecmascript-6">  import header from './components/header/header.vue';  // 加default表示對整個模塊進行導出  export default{    components: {      'v-header': header    }  };</script><span style="color:#cc0000;"><style lang="scss"></span>  #indexContent {    .tab{      display: flex;      width:100%;      height: 40px;      line-height: 40px;      .tab-item {        flex: 1;        text-align: center;        a{          display:block;        }      }    }  }</style>