预处理器

预处理器

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型，或在 *.vue 文件中这样来使用：
<style lang="less">
$color: red;

&-loyer {
  position: absolute;
  top: 20px;
  left: 0;
  width: 200px;
  min-height: 100px;
  padding: 12px;
  background-color: skyblue;
  color: @color;
}    
</style>

自动化导入

如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader。

• 比如多个vue单文件组件都使用到该变量@color，可以单独抽离为variable.less文件。
  哪个单文件组件使用到就引入。如果觉得是重复工作，可以使用vue-cli3中的自动化导入文件操作。

// 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('less').oneOf(type)))
  },
}

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