Vue 安裝依賴 stylus

2021-10-07 07:29:18 字數 929 閱讀 2976

安裝stylus、stylus-loadery依賴

npm install stylus stylus-loader
package.json檔案配置

上述命令並不會幫我們安裝到配置檔案,需要我們自己配置下,如下,新增上這兩項配置

"devdependencies"

:,

別名配置

配置別名為了在引用的時候,程式能夠載入正確的路徑。

開啟檔案根目錄下 build >webpack.base.conf.js

'@'

:resolve

('src'),

'common'

:resolve

('src/common'

),

這樣我們就可以使用common引入sty檔案了

我們將組合的樣式匯集在index.styl中

目錄結構:

index.styl檔案:

@import

'./mixin'

;@import

'./icon'

;@import

'./base'

;

在main.js中引入index.styl:

import vue from

'vue';;

import router from

'./router'

;import

'common/stylus/index.styl'

;

在元件中引入:

vue 樣式中的stylus

專案中如果多個地方都用的同一色值,並且有時候需要根據節日或者活動需要更改主題色即可用stylus來實現哦。一 stylus的檔案是.styl 二 style中的樣式引入 import assets var.styl 三 stylus語法 bg orange使用示例 在assets資料夾中建立them...

Vue 中全域性引入 stylus

目錄 一 安裝 二 vue.config.js 中配置 三 主題切換 npm i style resources loader d主要是方法 importstylus,然後在 module.exports.chainwebpack 中引入。配置完成後,一定要重啟專案才生效。const webpack...

在vue 中使用Stylus

對於電腦配置較高的記憶體較大的,推薦使用webstorm,這個編輯器很智慧型也很龐大,對於電腦配置稍低的,推薦使用後面兩個。另外,在編輯 時,當時用後兩種編輯器時,很依賴各種各樣的外掛程式 當你覺得使用的時候很不爽的時候 就去網上搜相應的外掛程式 比如我需要vue高亮語法的外掛程式,就去搜尋安裝vu...