阿里云優(yōu)惠券 先領(lǐng)券再下單

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

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

此時，只用import在main.js中導(dǎo)入variables.less文件是會報錯的。

解決辦法：

1、安裝less和less-loader

npm i less less-loader -D

2、要想全局使用還需使用一個插件( sass-resources-loader ),沒有寫錯，就是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')這個函數(shù)。

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

4、完成之后就可以重新運行項目了

npm run dev

補充知識： Vue less使用scope時滲入修改子組件樣式

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

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

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

來源：腳本之家

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

申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！