你可以在建立專案的時候選擇前處理器 (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文件

補充知識：vue-cli3構建的專案中vue元件中引入stylus檔案時報錯解決辦法

報錯表現

解決辦法：

引入檔案時路徑前增加~

例子：

@import '~common/stylus/mixin.styl';

vue.config.js配置檔案中alias的配置

chainWebpack: config => {
    config.resolve.alias
      .set('vue$','vue/dist/vue.esm.js')
      .set('@',resolve('src'))
      .set('@assets',resolve('src/assets'))
      .set('components',resolve('src/components'))
      .set('common',resolve('src/common'))
      .set('base',resolve('src/base'))
      .set('api',resolve('src/api')),config.resolve.symlinks(true)
  }

解釋：為何需要增加·~·

~common代表相對於common目錄，在webpack中配置了alias來簡寫common所指向的目錄

以上這篇在vue-cli3.0 中使用前處理器 (Sass/Less/Stylus) 配置全域性變數操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。