vue+sass定義全局變量，后綴名.scss報(bào)錯(cuò)之解決

vue在現(xiàn)在程序員圈中，已經(jīng)是眾所周知了，那么在我們?nèi)ナ褂胿ue的過(guò)程中經(jīng)常會(huì)使用強(qiáng)大的css預(yù)處理語(yǔ)言sass，那么在這個(gè)過(guò)程中我們有各種問(wèn)題，下面我們就簡(jiǎn)單的介紹其中一個(gè)小編碰到的問(wèn)題；

創(chuàng)新互聯(lián)是專業(yè)的榮縣網(wǎng)站建設(shè)公司，榮縣接單;提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行榮縣網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

在使用scss中，我們定義了變量方便更改整個(gè)項(xiàng)目的配色，那么我們?cè)?code>main.js中引入全局scss文件，但直接引入scss文件會(huì)報(bào)錯(cuò)。

那么針對(duì)此類問(wèn)題我們有兩種處理方式

第一、各個(gè)組件中引入（這個(gè)方法的弊端相信大家都看得到，就是需要在每一個(gè)組件中引入，寫(xiě)重復(fù)的代碼）如下：

import ../assets/css/common.scss;

這種方式很顯然我們每個(gè)程序員都是不推薦的；

第二、全局引入

首先，需要安裝一個(gè)開(kāi)發(fā)插件：sass-resources-loader

npm i sass-resources-loader --save-dev

接著，修改我們腳手架中build/utils.js文件，修改scss的加載設(shè)置

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

修改為：

 return {
     css: generateLoaders(),
     postcss: generateLoaders(),
     less: generateLoaders('less'),
     sass: generateLoaders('sass', { indentedSyntax: true }),
     scss: generateLoaders('sass').concat({
         loader: 'sass-resources-loader',
         options: {
             resources: path.resolve(__dirname, '../src/assets/css/common.scss')
          }
     }),
     stylus: generateLoaders('stylus'),
     styl: generateLoaders('stylus')
  }

之后重新啟動(dòng)項(xiàng)目，并且在main.js中引入公共的常量文件即可。

名稱欄目：vue+sass定義全局變量，后綴名.scss報(bào)錯(cuò)之解決
文章路徑：http://muchs.cn/article40/iidoho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、App開(kāi)發(fā)、網(wǎng)站維護(hù)、靜態(tài)網(wǎng)站、關(guān)鍵詞優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)