vue?css?相對路徑導(dǎo)入問題級踩坑記錄
前提
npm install style-loader --save-dev npm install css-loader --save-dev npm install file-loader --save-dev npm install vue-style-loader — save
利用官方的組件解決css 以及其他靜態(tài)資源的路徑問題
先附上成功的配置
1.build/utils.js
關(guān)鍵的地方在：
2.build/webpack.base.conf.js
遇到的坑
1.錯(cuò)誤寫法
第一行用的是絕對路徑，第二行用的是相對路徑。
這樣寫造成的錯(cuò)誤：
Module build failed: Error: Failed to find ‘~@/assets/css/login.css’
經(jīng)過多次嘗試，以及搜索了很久。有說法是style內(nèi)部不支持~@這種方式的路徑指向。
2.正確的寫法
3.如果想在“style”里面用上~@表示的相對路徑
接下來介紹我已經(jīng)實(shí)現(xiàn)的方案：
首先選用Less(http://lesscss.cn/) +postcss (https://www.postcss.com.cn/)。
接下來是具體做法，直接上當(dāng)前配置。
先安裝以下指令：
npm install less less-loader extract-text-webpack-plugin --sava-dev
然后打開工程的/build/ 新建文件 postcss.config.js
module.exports = {
plugins: {
'autoprefixer': {
browsers: 'last 5 version'
}
},
'postcss-import': {
resolve(id) {
if (id.charAt(0) == '~') {
return id.substr(1)
} else {
return id
}
}
}
}修改webpack.base.conf.js 的配置，增加：
// 它會(huì)應(yīng)用到普通的 `.css` 文件
// 以及 `.vue` 文件中的 `<style>` 塊
{
test: /\.css$/,
exclude: /node_modules/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},修改完之后，重啟webpack服務(wù)。這里我是用Mac 的終端，在webpack服務(wù)窗口使用command + C 就是結(jié)束當(dāng)前運(yùn)行的服務(wù)，再使用npm run dev 重啟就可以。
在.vue 文件內(nèi)的最后使用
<style lang="less" scoped>
@import "~assets/css/rank.less";
@import "~assets/css/common.less";
.contentBox {
padding: 20px;
}
</style>這里要注意加上 ~ , 不然依然無法識別路徑。這里暫時(shí)還沒找到原因，看別人的是可以直接使用。網(wǎng)上教程很多，但是很難找到比較完整的東西，對于自學(xué)的娃是傷不起，也沒有能一直免費(fèi)為你解答問題的人。還是自己慢慢摸索，相信大家都能有所成長。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中computed和watch的區(qū)別，對Vue感興趣的同學(xué)，可以參考下2021-05-05
vue中elementUI表單循環(huán)驗(yàn)證方式
這篇文章主要介紹了vue中elementUI表單循環(huán)驗(yàn)證方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue向后端傳數(shù)據(jù)后端接收為null問題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問題及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
有時(shí)在頁面刷新或者返回等操作時(shí),想監(jiān)聽路由變化進(jìn)行數(shù)據(jù)更新等操作,下面這篇文章主要給大家介紹了關(guān)于vue路由監(jiān)聽的一些常用方式,需要的朋友可以參考下2023-10-10
el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)
本文主要介紹了el-tree樹組件懶加載(后端上千條數(shù)據(jù)前端進(jìn)行處理)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
vue實(shí)現(xiàn)移動(dòng)端拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能
這篇文章主要介紹了Vue3?實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)功能，倒計(jì)時(shí)的運(yùn)用場景是獲取手機(jī)驗(yàn)證碼倒計(jì)時(shí)、獲取郵箱驗(yàn)證碼倒計(jì)時(shí)等場景，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-01-01
vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁面刷新數(shù)據(jù)丟失問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
v-model通常用于input的雙向數(shù)據(jù)綁定,它并不會(huì)向子組件傳遞數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue2和vue3組件v-model區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue router 組件的高級應(yīng)用實(shí)例代碼
這篇文章主要介紹了vue-router 組件的高級應(yīng)用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04