在component的style裡面引用css遇到幾個問題
1.路徑問題
<style src="@/assets/css/base.css">
這樣不會報錯
可是如果是
src="./assets/css/base.css"
會報錯
This dependency was not found:
* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-656039f0","scoped":false,"hasInlineConfig":false}!./assets/css/base.css in ./src/components/HelloWorld.vue
To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-656039f0","scoped":false,"hasInlineConfig":false}!./assets/css/base.css
2.使用@import方法
@import '@/assets/css/base.css';
@import './assets/css/base.css';
皆會報錯
Module build failed: Error: Failed to find '@/assets/css/base.css'
@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-656039f0","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-312 13:3-17:5 14:22-320
看了很多文章
有些說要在
webpack.base.conf加入module的rules
但版本很多,加了也是報錯
有些說可以直接用
vue cli都有內建css loader跟style loader了
也確認過有這兩個套件了
實在不知道問題點出在哪
我幫你試了一下
./應該是同一層目錄開始找
@import './assets/css/base.css';
然後@應該為src目錄底下開始
這個設定可以從build/webpack.base.conf.js裡面找到
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
我試了一下好像只能用在template或是script標籤裡
style標籤似乎不行
最後整理一下
import './' // 同一層目錄開始找
import '../' // 上一層目錄開始找
import '@/' // src目錄下開始找
import '' // 直接打名稱則是node_modules