首頁 > web前端 > js教程 > Vue2.0設定全域樣式步奏詳解

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

php中世界最好的语言
發布: 2018-04-14 15:24:17
原創
2560 人瀏覽過

這次帶給大家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檔案中加入依賴

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

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

npm install
登入後複製

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

sudu npm install
登入後複製

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

<style></style>
登入後複製

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

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

推薦閱讀:

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

js的作用域使用詳解

Vue2.0設定全域樣式步奏詳解JS canvas做出圍繞旋轉動畫

#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板