1. 程式人生 > >Vue2.0設定全域性樣式(less/sass和css)

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>

若公共檔案較多 可以整個在一個檔案 在通過公共檔案連結 實現多個樣式檔案全域性樣式

這裡寫圖片描述