Импорт CSS из node_modules с помощью Parcel

В настоящее время я мигрирую как проект React, созданный с помощью Webpack, в Parcel в качестве эксперимента, чтобы понять, о чем идет речь. В проекте используется Reactstrap, у которого Bootstrap является зависимостью.

У меня есть main.tsx файл, который является «оболочкой» для большинства других страниц в приложении, и он импортирует Bootstrap CSS из node_modules следующим образом:

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

Это отлично работает с Webpack, и когда я создаю файл, который импортирует main.tsx (и, предположительно, Boostrap CSS, который идет с ним) с помощью Parcel, ошибок нет. Однако на странице нет Bootstrap CSS, поэтому он выглядит дурацким.

Хотя Parcel объявляет себя «нулевой конфигурацией», есть ли какая-то конфигурация, которую мне нужно добавить, чтобы Parcel обработал и импортировал этот CSS?


webpack reactjs css node-modules parceljs
person Vidya    schedule 22.06.2019    source источник
comment
В папке сборки тоже нет файлов CSS (если можно запустить сборку)? Возможно, он связан с отдельным файлом CSS, но не ссылается на него в HTML. Ссылка: Parcel - Assets и Посылка - CSS   -  person Jezpoz    schedule 23.06.2019
comment
Ты прав. Это определенно что-то в этом роде. Спасибо.   -  person Vidya    schedule 23.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Для начала вам нужно иметь следующую структуру в вашем проекте React / Parcel:

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

Определите includePaths в .sassrc:

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

Импортируйте bootstrap в 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';
person Mouad EL Fakir    schedule 13.03.2020
comment
Я думаю, что нет необходимости создавать 2 файла просто для того, чтобы иметь возможность импортировать один css файл в js - person vsync; 18.04.2021