我想在具有自定义主题的 Svelte (v3) 项目中使用 Bootstrap (v4.5)。
bootstrap 文档 states你可以用scss做到这一点。所以我用 svelte-preprocess
设置了 Svelte如下:
添加到我的 package.json
:
"bootstrap": "^4.5.2",
"node-sass": "^4.14.1",
"svelte-preprocess": "^4.0.10",
在我的 rollup.config.js
:...
import preprocess from "svelte-preprocess";
export default {
...,
plugins: [
...,
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: (css) => {
css.write("public/build/bundle.css");
},
preprocess: preprocess(),
}),
在我的 App
成分:<style type="text/scss" global>
// Variable overrides for bootstrap
$primary: #19197c;
$secondary: #fd6400;
$light: #d8d8d8;
@import "../node_modules/bootstrap/scss/bootstrap";
</style>
不幸的是,看起来 Svelte 清除了所有样式,因为我的应用程序中没有引导样式。我想使用引导规范化以及引导类。有小费吗?谢谢!
最佳答案
我想出了如何让这个工作。您必须在 Svelte 之外单独处理 sass,使用 rollup-plugin-scss
,这样类就不会被清除。
在 rollup.config.js
:
...
import scss from "rollup-plugin-scss";
export default {
...,
plugins: [
...,
svelte({
// enable run-time checks when not in production
dev: !production,
emitCss: true
}),
scss(),
...,
创建一个名为 main.scss
的新文件:// Variable overrides for bootstrap
$primary: #19197c;
$secondary: #fd6400;
$light: #d8d8d8;
@import "../node_modules/bootstrap/scss/bootstrap";
在 main.js
:import "./main.scss";
import App from "./App.svelte";
const app = new App({
target: document.body,
props: {},
});
export default app;
就是这样!
关于bootstrap-4 - 如何在 Svelte 中通过 scss 设置全局 Bootstrap ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63299785/