Vue2.0設定全域樣式步奏詳解

這次帶給大家Vue2.0設定全域樣式步奏詳解，Vue2.0設定全域樣式的步奏詳解的注意事項有哪些，以下就是實戰案例，一起來看一下。

為Vue設定全域樣式需要幾個步驟(如果是sass將less改成sass即可)

第一步：在src目錄下的main.js,也就是入口檔案裡面加入下面程式碼

require('!style-loader!css-loader!less-loader!./common/less/index.less')

在Vue1.0版本中可以這樣寫，但是2.0版本就不行，會報錯提示解析錯誤

require('./common/less/index.less')

第二步：在build目錄下的webpack.base.conf.js設定模組，只需要在 rules下面加兩個模組即可

module.exports = {
 module: {
 rules: [
  {
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
  },
  {
  test:/\.css$/,
  loader:'css-loader!style-loader',
  }
 ] 
 }  
}

第三步：若提示報錯，可能你沒有安裝以上依賴，需要你在根目錄下的package.json檔案中加入依賴

#

# 第四步：在指令視窗中執行指令，進行安裝依賴

npm install

linux（ubuntu，deepin）,Mac os系統可能會提示權限不足需要取得權限那麼只需要在前面取得權限即可

sudu npm install

之後如果需要使用less的話，只要在style加上lang屬性就好了

<style></style>

若公共文件較多可以整個在一個文件在透過公用文件連結實現多個樣式文件全域樣式

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

element-ui如何實作重複使用Table的元件

js的作用域使用詳解

JS canvas做出圍繞旋轉動畫

#

以上是Vue2.0設定全域樣式步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！