Vue2.0設(shè)置全局樣式(less/sass和css)
更新時間：2017年11月18日 08:40:07 作者：豆i漿
這篇文章主要為大家詳細介紹了Vue2.0設(shè)置全局樣式(less/sass和css)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
為Vue設(shè)置全局樣式需要幾個步驟(如果是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文件中添加依賴
第四步：在命令窗口中執(zhí)行命令，進行安裝依賴
npm install
linux（ubuntu，deepin）,Mac os系統(tǒng)可能會提示權(quán)限不足需要獲取權(quán)限那么只需要在前面獲取權(quán)限即可
sudu npm install
之后如果需要使用less的話，只要在style添加lang屬性就好了
<style lang="less"></style>
若公共文件較多 可以整個在一個文件 在通過公共文件鏈接 實現(xiàn)多個樣式文件全局樣式
關(guān)于vue.js的學(xué)習(xí)教程，請大家點擊專題vue.js組件學(xué)習(xí)教程、Vue.js前端組件學(xué)習(xí)教程進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項賦值到對應(yīng)控件的實現(xiàn)方法啊，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
vue導(dǎo)入新工程?“node_modules依賴”問題
這篇文章主要介紹了vue導(dǎo)入新工程?“node_modules依賴”問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決
這篇文章主要介紹了Vue3中使用reactive時,后端有返回數(shù)據(jù)但dom沒有更新的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹了element?tooltip的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue是人氣爆棚且地表最強的JS（JavaScript）框架,祂允許我們構(gòu)建動態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會遭遇內(nèi)存泄漏,導(dǎo)致性能暴跌和意外行為,今天,我們將深入Vue App內(nèi)存泄漏的原因,并探討識別和修復(fù)這些問題的錦囊妙計2023-11-11
這篇文章主要介紹了vue-devtools安裝使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家詳細介紹了vue3實現(xiàn)CSS無限無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
下面小編就為大家分享一篇vue 子組件向父組件傳值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)倒計時獲取驗證碼效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了vue異步請求數(shù)據(jù)重新渲染方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01