使用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

导入引导程序

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

然后将 styles.scss 导入 main.tsx

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