css - 使用 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 (大概还有它附带的 Boostrap CSS)的文件时，没有错误。然而，页面上没有 Bootstrap CSS，所以看起来很奇怪。

尽管 Parcel 标榜自己为“零配置”，但我是否需要添加一些配置才能让 Parcel 处理和导入该 CSS？

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';

然后将您的styles.scss导入到ma​​in.tsx

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