1. 程式人生 > >vue-cli3.0 中使用前處理器 (Sass/Less/Stylus) 配置全域性變數

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