javascript 生产版本是否忽略样式文件?

wbrvyc0a  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(100)

我有一个新的Laravel应用程序,用Jetstream和Livewire构建。为了使UI的一小部分改变颜色,我必须添加一个自定义CSS文件:

/* resources/css/nouislider.css */

.noUi-connect {
    background-color: #a17656;
}

我在我的主JavaScript文件中调用这个文件,因为我最近在某个地方读到过(也许是Vite文档?)这是使其在项目中可用的首选方式:

/* resources/js/app.js */

import './bootstrap';
import '../css/nouislider.css';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

当我使用npm run dev在本地检出结果时,这很好,但是如果我改为运行npm run build,我在nouislider.css中指定的棕色不会生效,它显示默认的青绿色。
npm run dev

npm run build

我做错了什么?

t0ybt7op

t0ybt7op1#

显然,由于某种原因,Vue在运行npm run build时会将供应商的CSS文件放在我的自定义文件之后。当然,由于CSS的级联特性,它覆盖了我的自定义颜色。
所以,我不得不强迫它优先:

/* resources/css/nouislider.css */

.noUi-connect {
    background-color: #a17656 !important;
}

这似乎解决了问题,如果不优雅。

相关问题