在 vue js 单文件组件中导入 css 时出错

Question

我正在尝试在我的 vue js 单文件组件的样式标签中导入 2 个 css 文件。

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

但是抛出错误说：

ERROR 编译失败，出现 1 个错误
上午 9 点 28 分 42 秒

./src/components/Attend.vue 中的错误

语法错误：未闭合的字符串

@ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id" :"data-v-5d10c7ca","scoped":false,"hasInlineConfig":false}!./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 @ 多 (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

基于webpack，将assets文件夹内的所有文件编译后打包到static文件夹中。因此，当您在组件中导入文件/css/图像时，您的相对路径为'../static/styles/jquery-ui.js.css'。

因此你的代码应该是这样的：

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