vue 配置sass、scss全局變量

source 發(fā)布于2019-08-23 15:21 / 1339人閱讀

摘要：下載項(xiàng)目下載項(xiàng)目就不多說(shuō)了，大家既然搜索這個(gè)標(biāo)題，肯定不差這一步依賴下載執(zhí)行修改配置打開(kāi)文件夾，找到下面的文件，找到里的下面這段，將配置改成如下形式把項(xiàng)替換成如下形式這里我的放置了變量文件和重新執(zhí)行啟動(dòng)服務(wù)在組件里寫(xiě)上一段

下載vue項(xiàng)目

下載vue項(xiàng)目就不多說(shuō)了，大家既然搜索這個(gè)標(biāo)題，肯定不差這一步

依賴：

1.下載sass-resources-loader

執(zhí)行npm/cnpm install sass-resources-loader --save-dev

修改配置

打開(kāi)build文件夾，找到下面的utils文件，找到exports.cssLoaders里的下面這段，將scss配置改成如下形式

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders("less"),
    sass: generateLoaders("sass", { indentedSyntax: true }),
    scss: generateLoaders("sass"),
    stylus: generateLoaders("stylus"),
    styl: generateLoaders("stylus")
}

把scss項(xiàng)替換成如下形式

scss: generateLoaders("sass").concat({
  loader:"sass-resources-loader",
  options:{
    resources:path.resolve(__dirname,"../src/assets/sass/common.scss")
  }
}),

這里我的common.scss放置了變量文件variable.scss和mixin.scss

// mixin.scss
@import "./variable.scss";
@import "./mixin.scss";

重新執(zhí)行npm run dev 啟動(dòng)服務(wù)

在vue組件里寫(xiě)上一段試試吧，例如：

GPU云服務(wù)器云服務(wù)器全局變量全局變量操作注解全局變量定義全局變量

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

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

相關(guān)文章

vue-cli中配置全局sass變量

摘要：配置安裝修改的目錄下選項(xiàng)修改為如下選項(xiàng)個(gè)人使用習(xí)慣我這里是指定了為我的根文件，其他的文件都引入到這個(gè)文件中。配置安裝：sass-resources-loader npm i sass-resources-loader --save-dev 修改vue-cli的目錄下build/utils.js scss選項(xiàng)修改為如下選項(xiàng)： return { css: generateL...

BlackFlagBin 2019-08-22 18:04 評(píng)論0 收藏0
vue 配置sass、scss全局變量

摘要：下載項(xiàng)目下載項(xiàng)目就不多說(shuō)了，大家既然搜索這個(gè)標(biāo)題，肯定不差這一步依賴下載執(zhí)行修改配置打開(kāi)文件夾，找到下面的文件，找到里的下面這段，將配置改成如下形式把項(xiàng)替換成如下形式這里我的放置了變量文件和重新執(zhí)行啟動(dòng)服務(wù)在組件里寫(xiě)上一段下載vue項(xiàng)目下載vue項(xiàng)目就不多說(shuō)了，大家既然搜索這個(gè)標(biāo)題，肯定不差這一步依賴： 1.下載sass-resources-loader 執(zhí)行npm/cnpm i...

freewolf 2019-08-30 15:55 評(píng)論0 收藏0
Vue全家桶+Mint-Ui打造高仿QQMusic，搭配詳細(xì)說(shuō)明

摘要：簡(jiǎn)介最近有點(diǎn)小閑置，于是乎希望寫(xiě)點(diǎn)東西，正好自己喜歡聽(tīng)歌，便決定自己寫(xiě)一個(gè)音樂(lè)的簡(jiǎn)易版。核心文件則是在在這里使用統(tǒng)一管理頁(yè)面切換動(dòng)畫(huà)，歌曲播放狀態(tài)，歌曲進(jìn)度等信息。所有對(duì)于歌曲的操作都通過(guò)來(lái)進(jìn)行全局管理，然后對(duì)相應(yīng)的變化做出全局改變。 Vue-QQMusic 簡(jiǎn)介：最近有點(diǎn)小閑置，于是乎希望寫(xiě)點(diǎn)東西，正好自己喜歡聽(tīng)歌，便決定自己寫(xiě)一個(gè)QQ音樂(lè)的簡(jiǎn)易版。順便進(jìn)一步加深下自己對(duì)移動(dòng)端的知...

haoguo 2019-08-20 16:51 評(píng)論0 收藏0
vue-cli中配置全局sass變量

摘要：如何定義樣式的變量，使得全局的樣式可以在組件中使用，網(wǎng)上找了一些辦法，親測(cè)可以使用，我就記錄下來(lái)安裝修改的目錄下，如圖是樣式文件重新運(yùn)行如何定義樣式的變量，使得全局的樣式可以在組件中使用，網(wǎng)上找了一些辦法，親測(cè)可以使用，我就記錄下來(lái)； 1、安裝sass-resources-loader npm i sass-resources-loader --save-dev 2、修改vue-cl...

MingjunYang 2019-08-23 16:57 評(píng)論0 收藏0
在vue-cli中應(yīng)用scss/less全局變量

摘要：首先需要安裝插件修改的，找到的加載設(shè)置修改為，這里的路徑即是我們定義全局變量的地方修改的，找到的加載設(shè)置這里的路徑即是我們定義全局變量的地方替換成上面自定義的函數(shù)更多詳細(xì)知識(shí)介紹請(qǐng)?jiān)L問(wèn)我的個(gè)人主頁(yè) 首先需要安裝插件：sass-resources-loader npm i sass-resources-loader --save-dev scss: 修改vue-cli的build/uti...

Alex 2019-08-23 16:20 評(píng)論0 收藏0