vue（css预处理器）

安装

# Sass
 npm install -D sass-loader node-sass 
# Less 
 npm install -D less-loader less
# Stylus
 npm install -D stylus-loader stylus

less

<template>
  <div class="about">
    <h1 class="hh">This is an about page</h1>
  </div>
</template>
<script>

export default {
  
}
</script>

<style lang='less' scoped>
@color-pink: pink;
  .about {
    background-color: @color-pink;
    .hh {
      color: #fff;
    }
  }
</style>

自动化导入样式

npm i -D style-resources-loader

vue.config.js配置

const path = require('path')

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

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

improts.less

@color-pink: pink;

使用

<style lang='less' scoped>
  .about {
	    background-color: @color-pink;
	}
</style>