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 AM
     ./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”，“作用域”：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，在编译资产文件夹内的所有文件后，将打包到static文件夹中。因此，当您在组件中导入文件/ css /图像时，相对路径为'../static/styles/jquery-ui.js.css'。

因此，您的代码应如下所示：

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

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

1 个答案: