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