Vue-cli 3.0 使用Sass Scss Less預處理器

項目中使用預處理器，可以有效減少css代碼量，使用Sass||Scss||Less;

預處理器

你可以在創建項目的時候選擇預處理器 (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。

更詳細的請閱讀vue-cli3文檔