vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量

你可以在创建项目的时候选择预处理器 (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 scoped lang="stylus">
.personal
  position relative
  .banner-red
    width 100%
    height 100px
</style>

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

vue add style-resources-loader

然后它会让你选择你使用的预处理器

安装完成后选择你使用的预处理器，他会在vue.config.js代码中生成


然后重新启动项目

npm run serve

更详细的请阅读vue-cli3文档