使用 Parcel 从 node_modules 导入 CSS

Posted 2023-02-23

【中文标题】使用 Parcel 从 node_modules 导入 CSS

【英文标题】：Importing CSS from node_modules with Parcel

【发布时间】：2019-11-05 06:05:19

【问题描述】：

我目前正在将使用 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？

【问题讨论】：

构建文件夹中是否也没有 CSS 文件（如果您可以运行构建）？可能是它捆绑到一个单独的 CSS 文件，但没有在 html 中引用它。参考：Parcel - Assets 和 Parcel - CSS

你是对的。这绝对是这样的事情。谢谢。

【参考方案1】：

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

root
  |- node_modules
  |- src
  |   |- styles.scss
  |   |_ main.tsx
  |
  |- .sas-s-rc
  |_ package.json

在.sas-s-rc中定义includePaths：

// file : .sas-s-rc

  "includePaths": [
    "node_modules/",
    "src/"
  ]

在 styles.scss

中导入

bootstrap

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

然后在 ma​​in.tsx

中导入您的

styles.scss

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

【讨论】：

我认为没有必要仅仅为了能够在js中导入一个css文件而创建2个文件