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

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/组件/参加。vue

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

@./node_modules/vue-style-loader！./node_modules/css-loader？{"源地图"： true}！./node_modules/vue-loader/lib/Style-编译器？{"vue"： true，"id"："data-v-5d10c7ca"，"作用域"： false，"hasInlineConfig"： false}！./node_modules/vue-loader/lib/selector.js?type=styles

Answer 1

基于webpack，编译完资产文件夹中的所有文件后，将打包到静态文件夹中。因此，当您在组件中导入文件/css/图像时，您的相对路径是/静态/样式/jquery ui。js。css'。

因此，您的代码应该是这样的：

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