---
title: 'VueJS 2.0 教學筆記: 如何在Vue中使用Sass/Scss'
disqus: hackmd
---

VueJS 2.0 教學筆記: 如何在Vue中使用Sass/Scss
===

綱要

[TOC]

檔案結構
---

**1. 於`src`下新增目錄`styles`後，將平常自己整理好的sass或scss檔引入。**


**2. 用一個命名為`style.scss`的檔案來引入所有組件化過的樣式表：**


**3. 再到`main.js`引入剛才的`style.scss`**

[Github範例](https://github.com/fortes1219/vue_2020/blob/master/src/main.js)


**4.新增一個`vue.config.js`的檔案在專案根目錄下**

[Github範例](https://github.com/fortes1219/vue_2020/blob/master/vue.config.js)

// vue.coinfig.js
const path = require("path");
// const burl = '@/views/default/'
// const burl = ''
module.exports = {
  lintOnSave: false,
  publicPath: '.',
  pages: {
    index: {
      // entry for the page
      entry: "src/main.js",
      // the source template
      template: "public/index.html",
      // output as dist/index.html
      filename: "index.html"
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': path.resolve('src'),
        'src': path.resolve('src'),
        'utils': path.resolve('src/utils'),
        'styles': path.resolve('src/styles'),
        'assets': path.resolve('src/assets'),
        'components': path.resolve('src/components'),
        'services': path.resolve('src/services'),
        'vuex-store': path.resolve('src/store')
      }
    }
  },
  // 這段是設定開發人員工具中，可以找的到編譯後的CSS規則來源寫在哪
  css: {
    sourceMap: true,
    loaderOptions: {
      // pass options to sass-loader
    }
  },
  devServer: {
    disableHostCheck: true
  }
};

**5. 最後記得將`App.vue`的Style清除**

因為它預設會在最外層的#app做一些樣式。

日後不使用這支檔案的話直接刪除，或者從router替換掉它也可以，總之別讓它跟著一起被編譯


**6. 接著用終端指令`npm run serve`建置起來看一下是否在開發人員工具可以找到CSS來源**


###### tags: `VueJS` `Scss`