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...