[英]Importing CSS from node_modules with Parcel
我目前正在将使用 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,并且当我构建一个导入main.tsx
(以及它附带的 Boostrap CSS)的文件时,没有错误。 但是,页面上没有 Bootstrap CSS,所以看起来很古怪。
尽管 Parcel 将自己标榜为“零配置”,但是否需要为 Parcel 添加一些配置来处理和导入该 CSS?
首先,您的 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';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.