使用Parcel从node_modules导入CSS

Question

我目前正在将使用 Webpack 构建的 React 项目迁移到 Parcel，以了解其带来的一切变革。该项目使用 Reactstrap，其中包含 Bootstrap 依赖项。

我有一个名为 main.tsx 的文件，它是应用中大多数其他页面的“壳”，并从 node_modules 导入 Bootstrap CSS，如下所示：

import * as React from "react";
import 'bootstrap/dist/css/bootstrap.min.css'; // <-- There it is!
...

这在Webpack上可以正常工作，当我使用Parcel构建导入 main.tsx文件时（假设其中包括Bootstrap CSS），没有错误。但是页面上没有Bootstrap CSS，看起来很奇怪。

虽然Parcel自称“零配置”，但是我需要添加一些配置让Parcel处理和导入CSS吗？

- Vidya

---

如果您可以运行构建，那么构建文件夹中也没有CSS文件吗？可能是它会捆绑到一个单独的CSS文件中，但在HTML中不会引用它。参考：Parcel - Assets 和 Parcel - CSS。 - Jezpoz

你说得对。肯定是类似这样的东西。谢谢。 - Vidya

Answer 1

首先，在你的React/Parcel项目中，你需要有以下结构：

root
  |- node_modules
  |- src
  |   |- styles.scss
  |   |_ main.tsx
  |
  |- .sassrc
  |_ package.json

在 .sassrc 中定义 includePaths：

// file : .sassrc
{
  "includePaths": [
    "node_modules/",
    "src/"
  ]
}

在 styles.scss 中导入 bootstrap

// file : styles.scss
@import '../node_modules/bootstrap/scss/bootstrap';

然后在 main.tsx 中导入你的 styles.scss

// file : main.tsx
import * as React from 'react';
import '~/styles.scss';

- Mouad EL Fakir

---

我认为没有必要创建两个文件，只是为了能够在js中导入一个css文件。 - vsync