為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 lang="less"></style>

若公共文件較多 可以整個在一個文件 在通過公共文件鏈接 實現多個樣式文件全局樣式

關于vue.js的學習教程，請大家點擊專題vue.js組件學習教程、Vue.js前端組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。