首先建立一個scss檔案

接著在專案根目錄下建立 vue.config.js

vue.config.js內容

注意這段程式碼

  css: {
        loaderOptions: {
            // 給 sass-loader 傳遞選項
            sass: {
                // @/ 是 src/ 的別名
                // 所以這裡假設你有 `src/assets/css/varuables.scss` 這個檔案
                data: `@import "@/assets/css/varuables.scss";`
            }
        }
    },

module.exports = {
    // 專案部署的基礎路徑
    // 我們預設假設你的應用將會部署在域名的根部，
    // 比如 https://www.my-app.com/
    // 如果你的應用時部署在一個子路徑下，那麼你需要在這裡
    // 指定子路徑。比如，如果你的應用部署在
    // https://www.foobar.com/my-app/
    // 那麼將這個值改為 `/my-app/`
    baseUrl: '/',

    // 將構建好的檔案輸出到哪裡
    outputDir: 'dist',

    // 是否在儲存的時候使用 `eslint-loader` 進行檢查。
    // 有效的值：`ture` | `false` | `"error"`
    // 當設定為 `"error"` 時，檢查出的錯誤會觸發編譯失敗。
    lintOnSave: true,

    // 使用帶有瀏覽器內編譯器的完整構建版本
    // 查閱 https://cn.vuejs.org/v2/guide/installation.html#執行時-編譯器-vs-只包含執行時
   // compiler: false,
    runtimeCompiler: true, //關鍵點在這
    // 調整內部的 webpack 配置。
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
    chainWebpack: () => {},
    configureWebpack: () => {},

    // vue-loader 選項
    // 查閱 https://vue-loader.vuejs.org/zh-cn/options.html
   // vueLoader: {},

    // 是否為生產環境構建生成 source map？
    productionSourceMap: true,

    // CSS 相關選項
    css: {
        // 將元件內的 CSS 提取到一個單獨的 CSS 檔案 (只用在生產環境中)
        extract: true,

        // 是否開啟 CSS source map？
        sourceMap: false,

        // 為前處理器的 loader 傳遞自定義選項。比如傳遞給
        // sass-loader 時，使用 `{ sass: { ... } }`。
        loaderOptions: {},

        // 為所有的 CSS 及其預處理檔案開啟 CSS Modules。
        // 這個選項不會影響 `*.vue` 檔案。
        modules: false
    },

    // 在生產環境下為 Babel 和 TypeScript 使用 `thread-loader`
    // 在多核機器下會預設開啟。
    parallel: require('os').cpus().length > 1,

    // 是否使用 `autoDLLPlugin` 分割供應的包？
    // 也可以是一個在 DLL 包中引入的依賴的顯性的陣列。
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#dll-模式
   // dll: false,

    // PWA 外掛的選項。
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli-plugin-pwa/README.md
    pwa: {},

    // 配置 webpack-dev-server 行為。
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8081,
        https: false,
        hotOnly: false,
        // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
        proxy: null, // string | Object
        before: app => {
            // `app` 是一個 express 例項
        }
    },
    css: {
        loaderOptions: {
            // 給 sass-loader 傳遞選項
            sass: {
                // @/ 是 src/ 的別名
                // 所以這裡假設你有 `src/assets/css/varuables.scss` 這個檔案
                data: `@import "@/assets/css/varuables.scss";`
            }
        }
    },
    // 三方外掛的選項
    pluginOptions: {
        // ...
    }
}
 

這樣直接可以在任何地方使用scss了

下面是官網的文件使用方法

你可以在建立專案的時候選擇前處理器 (Sass/Less/Stylus)。如果當時沒有選好，內建的 webpack 仍然會被預配置為可以完成所有的處理。你也可以手動安裝相應的 webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus
 

然後你就可以匯入相應的檔案型別，或在 *.vue 檔案中這樣來使用：

<style lang="scss">
$color: red;
</style>

#自動化匯入

如果你想自動化匯入檔案 (用於顏色、變數、mixin……)，你可以使用 style-resources-loader。這裡有一個關於 Stylus 的在每個單檔案元件和 Stylus 檔案中匯入 ./src/styles/imports.styl 的例子：

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}

你也可以選擇使用 vue-cli-plugin-style-resources-loader。

#PostCSS

Vue CLI 內部使用了 PostCSS。

你可以通過 .postcssrc 或任何 postcss-load-config 支援的配置源來配置 PostCSS。也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我們預設開啟了 autoprefixer。如果要配置目標瀏覽器，可使用 package.json 的 browserslist 欄位。

關於 CSS 中瀏覽器字首規則的注意事項

在生產環境構建中，Vue CLI 會優化 CSS 並基於目標瀏覽器拋棄不必要的瀏覽器字首規則。因為預設開啟了 autoprefixer，你只使用無字首的 CSS 規則即可。

#CSS Modules

你可以通過 <style module> 以開箱即用的方式在 *.vue 檔案中使用 CSS Modules。

如果想在 JavaScript 中作為 CSS Modules 匯入 CSS 或其它預處理檔案，該檔案應該以 .module.(css|less|sass|scss|styl) 結尾：

import styles from './foo.module.css'
// 所有支援的前處理器都一樣工作
import sassStyles from './foo.module.scss'

如果你想去掉檔名中的 .module，可以設定 vue.config.js 中的 css.modules 為 true：

// vue.config.js
module.exports = {
  css: {
    modules: true
  }
}

如果你希望自定義生成的 CSS Modules 模組的類名，可以通過 vue.config.js 中的 css.loaderOptions.css 選項來實現。所有的 css-loader 選項在這裡都是支援的，例如 localIdentName和 camelCase：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}

#向前處理器 Loader 傳遞選項

有的時候你想要向 webpack 的前處理器 loader 傳遞選項。你可以使用 vue.config.js 中的 css.loaderOptions 選項。比如你可以這樣向所有 Sass 樣式傳入共享的全域性變數：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項
      sass: {
        // @/ 是 src/ 的別名
        // 所以這裡假設你有 `src/variables.scss` 這個檔案
        data: `@import "@/variables.scss";`
      }
    }
  }
}