iT邦幫忙

0

vue cli @import css

Rafiki 2018-05-21 21:48:4012476 瀏覽

在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了
也確認過有這兩個套件了
實在不知道問題點出在哪

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

3
Homura
iT邦高手 1 級 ‧ 2018-05-22 15:17:02

我幫你試了一下
./應該是同一層目錄開始找

@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

我要發表回答

立即登入回答