你可以在创建项目的时候选择预处理器 (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-cli 3.0 使用Sass Scss Less预处理器
原文：https://www.cnblogs.com/yangsg/p/10644662.html