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