域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

這篇文章主要介紹了Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

當(dāng)你想要在vue項(xiàng)目的一個(gè)組件中使用全局樣式文件中定義好的變量，此時(shí)只在main.js中import是不行的。

此時(shí)，只用import在main.js中導(dǎo)入variables.less文件是會(huì)報(bào)錯(cuò)的。

解決辦法：

1、安裝less和less-loader

npm i less less-loader -D

2、要想全局使用還需使用一個(gè)插件( sass-resources-loader ),沒有寫錯(cuò)，就是sass

npm i sass-resources-loader -D

3、安裝完sass-resources-loader后,配置webpack，找到build/utils.js文件，在cssLoaders函數(shù)中添加使用全局less函數(shù)

// 增加全局使用less函數(shù)
 function lessResourceLoader() {
 var loaders = [
  cssLoader,
  'less-loader',
  {
  loader: 'sass-resources-loader',
  options: {
   resources: [
   path.resolve(__dirname, '../src/assets/less/variables.less'), //定義全局變量的文件路徑
   ]
  }
  }
 ];
 if (options.extract) {
  return ExtractTextPlugin.extract({
  use: loaders,
  fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
 }

并在return中用你定義的lessResourceLoader函數(shù)替換less: generateLoaders('less')這個(gè)函數(shù)。

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

4、完成之后就可以重新運(yùn)行項(xiàng)目了

npm run dev

補(bǔ)充知識(shí)： Vue less使用scope時(shí)滲入修改子組件樣式

我就廢話不多說(shuō)了，大家還是直接看代碼吧~

@aaa: ~'>>>';
.wrap {
  @{aaa} .component1 {
    width: 120px;
  }
　　/deep/ .component2 {
    width: 130px;
　　}
}

以上這篇Vue全局使用less樣式,組件使用全局樣式文件中定義的變量操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

來(lái)源：腳本之家

鏈接：https://www.jb51.net/article/197902.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！