Ошибка при импорте css в один компонент файла vue js

Question

Я пытаюсь импортировать 2 файла css в теге стиля моего отдельного файлового компонента vue js.

<style >
    @import '../assets/styles/jquery-ui.js.css';
    @import '../assets/styles/jquery-ui.css';
</style>

но выдает ошибку:

ОШИБКА Не удалось скомпилировать с 1 ошибкой
9:28:42 AM

ошибка в./src/components/Attend.vue

Синтаксическая ошибка: Незакрытая строка

@ ./node_modules/vue-style-loader!./node_modules/css-loader?ndom"sourceMap":true!} ./ node_modules / вю-погрузчик / Библиотека / стиль-компилятор { "вю": правда, "идентификатор": "данные-v-5d10c7ca", "область видимости" ложь "hasInlineConfig" ложь} ./!node_modules / vue-loader / lib / selector.js? type = styles & index = 0! ./ src / components / Attend.vue 4: 14-308 13: 3-17: 5 14: 22-316 @ ./src/components/Attend.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack) -dev-сервер / клиент? http://localhost:8080 webpack / hot / dev-server ./src/main.js

Answer 1

Основываясь на веб-пакете, после компиляции все файлы в папке ваших активов будут упакованы в папку static.Поэтому, когда вы импортируете файлы / css / images в ваш компонент, ваш относительный путь будет '../static/styles/jquery-ui.js.css'.

Поэтому ваш код должен быть таким:

<style >
    @import "../static/styles/jquery-ui.js.css";
    @import "../static/styles/jquery-ui.css";
</style>