Vue2.0設置全局樣式(less/sass和css)

為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前端組件學習教程進行學習。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com