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

【问题标题】：Merging two css-files with node-sass使用 node-sass 合并两个 css 文件
【发布时间】：2021-01-30 16:03:20
【问题描述】：

我正在使用 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";

现在我正在寻找一个解决方案，如何将引导程序中的两个 css 文件应用到 .table-responsive - 类。

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

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

在生成的css-file中，有一个class table-responsive，但是class是空的：

.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"
}

【问题讨论】：

标签： bulma node-sass

【解决方案1】：

您可以尝试在“*”从 Bootstrap 导入所需的 SCSS 和表格组件，而不是在 .table-responsive 声明中导入，就像使用 Bulma 一样。

看看我对您的 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 导入的所有不同组件。如果您需要其他组件，您可以根据需要导入它们。

【讨论】：