Vue項目全局使用less樣式,less

時間過得真快,距離上一篇文章都已是去年了,之前還想着常常發佈些文章來促使進步呢

如今努力也不萬,哈哈,進入正題.

你們在編寫vue項目時,確定有不少相同的字體樣式,和類名.在這裏我教你們使用全局的css樣式.

我這裏以less文件爲例(less仍是很好用的)

• 安裝less, 這是基礎
  

cnpm install less less-loader --save複製代碼

• 要想全局使用還需使用一個插件( sass-resources-loader )
  

cnpm i sass-resources-loader
複製代碼

• 安裝完sass-resources-loader後,我們還須要簡單配置下webpack
  

1. 找到build/utils.js文件
2. 在cssLoaders函數中添加使用全局less函數

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

3 在return中用lessResourceLoader() (表明的是你寫函數所使用的名字,本身能夠起任意名字) 替換以前less函數

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: lessResourceLoader(), // 替換以後
    // less: generateLoaders('less'), // 原webpack配置的
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

複製代碼

這三步走以後,就能夠了,從新cnpm run dev就👌了

注意:

1. 在全局使用less文件時,_color.less文件中只能寫自定義的樣式及類名

• 例如:
  @color_333: #333;
  @color_666: #666;
  @color_999: #999;複製代碼

確定有小夥伴想着在main.js裏全局引用下_color.less也能達到這個效果,這樣子是實現不了的,

我當初也是這樣想的

2. 小夥伴能夠在main.js中引用_index.less文件,在_index.less文件中引用其餘樣式文件,引用的其餘樣式文件時,引用樣式文件裏不能包括@自定義的內容,要不會報錯的, 這樣作的目的在於有多個樣式文件時,不須要在組件頁面上單獨@import引用,一次搞定

今天就分享到這了,之後必定要堅持分享下去,19年,共勉,加油,你們有啥問題能夠一塊兒討論,共同窗習,共同進步

喜歡的小夥伴點個👍吧,