使用 node-sass 合并两个 css 文件

编程问答 2022-05-28

问题描述

我使用 bulma 作为我主页的 CSS 框架。然而，一个插件正在使用 bootstrap 和 bootstrap-editable，所以我正在寻找一种解决方案，如何在不破坏我的布局的情况下添加 bootstrap.css 和 bootstrap-editable.css。

<html>
<body>
<!-- header designed with bulma -->
<!-- left column menu designed with bulma -->
<div class="column>
<table class="table-responsive">
...
</table>
</div>
<!- footer designed with bulma -->
</body>
</html>

我使用 npm run css-build 通过 node-sass 创建我的 css 文件，如 here 所述。

@charset "utf-8";

// Set your brand colors
$blue:  hsl(217,71%,53%);

// Update Bulma's global variables
$primary: $blue;


// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/components/_all.sass";
@import "../node_modules/bulma/sass/elements/_all.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/grid/_all.sass";
@import "../node_modules/bulma/sass/helpers/_all.sass";
@import "../node_modules/bulma/sass/layout/_all.sass";

@import "my.scss";

现在我正在寻找一个解决方案，我可以如何将 bootstrap 中的两个 css 文件应用于 .table-responsive - Class。

我已经尝试过类似的方法，但这不起作用：

.table-responsive {
    @import "bootstrap.min.css";
    @import "bootstrap-editable.css";
}

在生成的css文件中，有一个table-responsive类，但是这个类是空的：

.table-responsive { }

你能告诉我，我怎样才能为一个班级导入一个 css 文件？

托马斯

我的 package.json

"scripts": {
  "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css","css-watch": "npm run css-build -- --watch","start": "npm run css-watch"
}

解决方法

不是在 .table-responsive 声明中导入，您可以尝试像在 Bulma 中所做的那样，在“顶级”从 Bootstrap 导入所需的 SCSS 和表格组件。

看看我对您的 SCSS 所做的更改：

@charset "utf-8";

// Set your brand colors
$blue:  hsl(217,71%,53%);

// Update Bulma's global variables
$primary: $blue;

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/components/_all.sass";
@import "../node_modules/bulma/sass/elements/_all.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/grid/_all.sass";
@import "../node_modules/bulma/sass/helpers/_all.sass";
@import "../node_modules/bulma/sass/layout/_all.sass";

// Add required Bootstrap SCSS

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Add the tables component

@import "../node_modules/bootstrap/scss/tables";
@import "bootstrap-editable.css";

@import "my.scss";

您所要做的就是确保通过 NPM 安装了 Bootstrap。您还应该仔细检查您没有任何冲突的类名或样式。

我在 a Gist 中列出了您可以从 Bootstrap 导入的所有不同组件。如果您需要其他组件，您可以根据需要导入它们。

node-sass