摘要:需求在用開發(fā)項目的時候,有這樣的一個需求我有個的公共文件需要在項目的每個文件使用,而不用分別在文件中引入。第一步首先要下載第二步,在項目里找到文件。在上面的文件里用引入其他文件。
需求:在用vue-cli開發(fā)項目的時候,有這樣的一個需求:我有個.scss的公共文件需要在項目的每個 .vue 文件使用,而不用分別在.vue文件中引入。這個時候就需要用到 sass-resources-loader 。
(1)第一步:
首先要下載 : sass-resources-loader
npm install sass-resources-loader --save-dev
(2)第二步,在項目里找到build/utils文件。并找到下圖位置
然后在scss: generateLoaders("sass")后面加上以下代碼:
.concat( { loader: "sass-resources-loader", options: { // 需要全局引入的sass文件,這里引入了的scss文件,在所有的.vue文件都可以用到這份css樣式, // 下面的resources接受一個數(shù)組,可以添加多個scss文件 resources: [path.resolve(__dirname, "../src/assets/sass/index.scss")] } } )
(3)此時文件已經(jīng)配置成功,需要重啟npm run dev服務(wù)才可以看到效果.
(4) 如果要導(dǎo)入多個文件,有兩種辦法:
1、在上面代碼的resources數(shù)組選項增加多一個scss文件路徑。 2、在上面的index.scss文件里用@import引入其他scss文件。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/108061.html
摘要:需求在用開發(fā)項目的時候,有這樣的一個需求我有個的公共文件需要在項目的每個文件使用,而不用分別在文件中引入。第一步首先要下載第二步,在項目里找到文件。在上面的文件里用引入其他文件。 需求:在用vue-cli開發(fā)項目的時候,有這樣的一個需求:我有個.scss的公共文件需要在項目的每個 .vue 文件使用,而不用分別在.vue文件中引入。這個時候就需要用到 sass-resources-l...
摘要:開發(fā)前準(zhǔn)備環(huán)境版本微信開發(fā)工具最新版最新版文檔本項目技術(shù)棧基于微信小程序快速開始克隆項目進入項目安裝依賴啟動構(gòu)建打開微信開發(fā)工具,導(dǎo)入項目目錄結(jié)構(gòu)構(gòu)建相關(guān)配置相關(guān)打包相關(guān)第三方模塊源代碼全局公用方法所有頁面文件業(yè)務(wù)組件圖片字體等靜態(tài)資源業(yè)務(wù) 開發(fā)前準(zhǔn)備 環(huán)境: Node.js LTS版本 微信Web開發(fā)工具 最新版 git 最新版 文檔: 本項目技術(shù)?;?ES2016 VueJS ...
摘要:手把手教你寫組件庫最近在研究的實現(xiàn),發(fā)現(xiàn)網(wǎng)上很少有關(guān)于插件具體實現(xiàn)的文章,官方的文檔也只是一筆帶過,對于新手來說并不算友好。 手把手教你寫 Vue UI 組件庫 最近在研究 muse-ui 的實現(xiàn),發(fā)現(xiàn)網(wǎng)上很少有關(guān)于 vue 插件具體實現(xiàn)的文章,官方的文檔也只是一筆帶過,對于新手來說并不算友好。 筆者結(jié)合官方文檔,與自己的摸索總結(jié),以最簡單的 FlexBox 組件為例子,帶大家入門 v...
閱讀 3241·2021-09-30 09:48
閱讀 3526·2021-09-22 16:00
閱讀 1090·2019-08-30 13:08
閱讀 3129·2019-08-30 10:53
閱讀 2441·2019-08-29 18:33
閱讀 1614·2019-08-29 12:47
閱讀 921·2019-08-29 12:16
閱讀 1957·2019-08-26 12:02