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ò)，可能你沒(méi)有安裝以上依賴，需要你在根目錄下的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è)文件 在通過(guò)公共文件鏈接 實(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í)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼
這篇文章主要介紹了Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-08-08
Vue設(shè)置提示和警告彈出框?qū)崙?zhàn)案例
頁(yè)面中會(huì)有很多時(shí)候需要彈窗提示,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置提示和警告彈出框的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
前端Vue全屏screenfull通用解決方案及原理詳細(xì)分析
這篇文章主要給大家介紹了關(guān)于前端Vue全屏screenfull通用解決方案及原理的相關(guān)資料,使用screenfull這一第三方庫(kù)可以實(shí)現(xiàn)更穩(wěn)定的全屏功能,需要的朋友可以參考下2024-10-10
ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
elementui如何解決el-table重復(fù)寫loading問(wèn)題
這篇文章主要介紹了elementui如何解決el-table重復(fù)寫loading問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了element-ui下拉菜單組件Dropdown,本文詳細(xì)給大家介紹了我遇到的一個(gè)最大的坑，通過(guò)結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
Vue.js是JavaScript MVVM（Model-View-ViewModel）庫(kù)，十分簡(jiǎn)潔，Vue核心只關(guān)注視圖層，相對(duì)AngularJS提供更加簡(jiǎn)潔、易于理解的API。接下來(lái)通過(guò)本文給大家介紹vue的基本用法與常見指令，感興趣的朋友一起看看吧2017-08-08
Vue.js中自定義Markdown插件實(shí)現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個(gè)插件來(lái)解析<references>標(biāo)簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標(biāo)簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了vant-image本地圖片無(wú)法顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01