成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在vue項(xiàng)目中全局引入一個(gè) .scss文件

dcr309duan / 541人閱讀

摘要：需求在用開發(fā)項(xiàng)目的時(shí)候，有這樣的一個(gè)需求我有個(gè)的公共文件需要在項(xiàng)目的每個(gè)文件使用，而不用分別在文件中引入。第一步首先要下載第二步，在項(xiàng)目里找到文件。在上面的文件里用引入其他文件。

需求：在用vue-cli開發(fā)項(xiàng)目的時(shí)候，有這樣的一個(gè)需求：我有個(gè).scss的公共文件需要在項(xiàng)目的每個(gè) .vue 文件使用，而不用分別在.vue文件中引入。這個(gè)時(shí)候就需要用到 sass-resources-loader 。

（1）第一步：
首先要下載 ： sass-resources-loader

npm install sass-resources-loader --save-dev

（2）第二步，在項(xiàng)目里找到build/utils文件。并找到下圖位置

然后在scss: generateLoaders("sass")后面加上以下代碼：

.concat(
      {
        loader: "sass-resources-loader",
        options: {
          // 需要全局引入的sass文件，這里引入了的scss文件，在所有的.vue文件都可以用到這份css樣式，
          // 下面的resources接受一個(gè)數(shù)組，可以添加多個(gè)scss文件
          resources: [path.resolve(__dirname, "../src/assets/sass/index.scss")]
        }
      }
    )

（3）此時(shí)文件已經(jīng)配置成功，需要重啟npm run dev服務(wù)才可以看到效果.

（4） 如果要導(dǎo)入多個(gè)文件,有兩種辦法：

1、在上面代碼的resources數(shù)組選項(xiàng)增加多一個(gè)scss文件路徑。
2、在上面的index.scss文件里用@import引入其他scss文件。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113464.html

相關(guān)文章

  • 在vue項(xiàng)目中全局引入一個(gè) .scss文件

    摘要：需求在用開發(fā)項(xiàng)目的時(shí)候，有這樣的一個(gè)需求我有個(gè)的公共文件需要在項(xiàng)目的每個(gè)文件使用，而不用分別在文件中引入。第一步首先要下載第二步，在項(xiàng)目里找到文件。在上面的文件里用引入其他文件。 需求：在用vue-cli開發(fā)項(xiàng)目的時(shí)候，有這樣的一個(gè)需求：我有個(gè).scss的公共文件需要在項(xiàng)目的每個(gè) .vue 文件使用，而不用分別在.vue文件中引入。這個(gè)時(shí)候就需要用到 sass-resources-l...

    寵來也 評(píng)論0 收藏0

  • 小程序開發(fā)

    摘要：開發(fā)前準(zhǔn)備環(huán)境版本微信開發(fā)工具最新版最新版文檔本項(xiàng)目技術(shù)棧基于微信小程序快速開始克隆項(xiàng)目進(jìn)入項(xiàng)目安裝依賴啟動(dòng)構(gòu)建打開微信開發(fā)工具，導(dǎo)入項(xiàng)目目錄結(jié)構(gòu)構(gòu)建相關(guān)配置相關(guān)打包相關(guān)第三方模塊源代碼全局公用方法所有頁(yè)面文件業(yè)務(wù)組件圖片字體等靜態(tài)資源業(yè)務(wù) 開發(fā)前準(zhǔn)備 環(huán)境: Node.js LTS版本 微信Web開發(fā)工具 最新版 git 最新版 文檔: 本項(xiàng)目技術(shù)?；?ES2016 VueJS ...

    ghnor 評(píng)論0 收藏0

  • 手把手教你寫 Vue UI 組件庫(kù)@vue2.0

    摘要：手把手教你寫組件庫(kù)最近在研究的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過，對(duì)于新手來說并不算友好。 手把手教你寫 Vue UI 組件庫(kù) 最近在研究 muse-ui 的實(shí)現(xiàn)，發(fā)現(xiàn)網(wǎng)上很少有關(guān)于 vue 插件具體實(shí)現(xiàn)的文章，官方的文檔也只是一筆帶過，對(duì)于新手來說并不算友好。 筆者結(jié)合官方文檔，與自己的摸索總結(jié)，以最簡(jiǎn)單的 FlexBox 組件為例子，帶大家入門 v...

    Keagan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<