在vue-cli3.0 中使用預處理器 (Sass/Less/Stylus) 配置全局變量操作

更新時間：2020年08月10日 09:32:29 作者：會敲代碼的蠟筆小新

這篇文章主要介紹了在vue-cli3.0 中使用預處理器 (Sass/Less/Stylus) 配置全局變量操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

你可以在創(chuàng)建項目的時候選擇預處理器 (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文件時報錯解決辦法

報錯表現(xiàn)

解決辦法：

引入文件時路徑前增加~

例子：

@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) 配置全局變量操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue 虛擬DOM快速入門
這篇文章主要介紹了vue 虛擬DOM的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下
2021-04-04
Vue彈出菜單功能的實現(xiàn)代碼
這篇文章主要介紹了Vue左側底部彈出菜單功能的實現(xiàn)代碼,需要的朋友可以參考下
2018-09-09
vue通過ollama接口調用開源模型實現(xiàn)人機對話功能
文章介紹了如何在本地安裝ollama并配置開源大模型,以及如何通過JavaScript和Vue.js實現(xiàn)人機對話功能,感興趣的朋友一起看看吧
2024-11-11
如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲
SQLite是一種嵌入式關系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務器的、自給自足的、事務性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的相關資料,需要的朋友可以參考下
2024-03-03
VUE3基礎學習之click事件詳解
由于vue是一個雙向數(shù)據(jù)綁定的框架,它的點擊事件與以前常用的還是有很大的差別的,下面這篇文章主要給大家介紹了關于VUE3基礎學習之click事件的相關資料,需要的朋友可以參考下
2022-01-01
vue基礎之ElementUI表格詳解
這篇文章主要為大家詳細介紹了vue的ElementUI表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
vue element table 表格請求后臺排序的方法
今天小編就為大家分享一篇vue element table 表格請求后臺排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue使用el-input自動獲取焦點和二次獲取焦點問題及解決
這篇文章主要介紹了Vue使用el-input自動獲取焦點和二次獲取焦點問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
9102年webpack4搭建vue項目的方法步驟
這篇文章主要介紹了9102年webpack4搭建vue項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-02-02
Vue.js 單頁面多路由區(qū)域操作的實例詳解
這篇文章主要介紹了 Vue.js 單頁面多路由區(qū)域操作的實例詳解的相關資料,需要的朋友可以參考下
2017-07-07