как настроить загрузку 4 scss с помощью webpack

Я начинаю новый проект, используя actionjs ES6 и webpack

с использованием реактивного статичного шаблона стартера вопрос, как я могу импортировать bootstrap4 в процесс сборки?

Я не хочу использовать файл bootstrap.css, вместо этого я хочу, чтобы webpack создавал его для меня, поэтому я могу изменить его @variables и применить свою тему и т.д.

я начал проект путем клонирования шаблона

> git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install

  1. установленный bootstrap с использованием npm

    npm install [email protected]

теперь, если мне нужен основной файл начальной загрузки в мой index.js, он будет загружаться отлично. но как я могу включить файлы sass bootsrap, чтобы начать его настраивать?

Ответы

Ответ 1

Прежде всего вам нужно скачать надлежащий загрузчик для scss

Установить сассировщик

npm install sass-loader --save-dev

Затем вам нужно настроить свой веб-пакет, чтобы протестировать все файлы scss, чтобы он мог справиться с этим. Вот как это делается

{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

Если у вас возникла ошибка относительно узла

Если вы получили ошибку, например, не можете разрешить узел-узел, тогда установите

npm i node-sass --save-dev

Теперь, если вы импортируете bootstrap.scss, webpack свяжет его для вас

import "bootstrap/scss/bootstrap.scss"

Как настроить его

Пример в вашем собственном файле scss

$btn-font-weight:bold;

а затем импортировать компонент, который вы хотите переопределить, или весь файл bootstrap.scss

@import '~bootstrap/scss/bootstrap.scss';

В моем случае style.scss

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

main.js

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

Надеюсь, это поможет вам достичь своей цели!

Я создал демо-приложение здесь

запустить npm install и npm start на localhost:8080

Ответ 2

Похоже, что шаблонный шаблон не использует sass-loader и не ищет файлы .scss.

Поэтому сначала установите npm я sass-loader --save

Затем под частью загрузчиков в конфигурации webpack вы должны добавить что-то вроде этого:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// this is the entire config object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};

Теперь, если вы хотите поиграть с загрузочными переменными .scss, вы можете сделать это следующим образом:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

и в вашем main.js стиль импорта

import "styles/app.scss";

Кроме того, я должен упомянуть, это кажется очень близким к этому ответу

Ответ 3

Теперь, когда вы переключились на реакцию-рогатку с веб-пакетом, уже настроенным для sass, есть несколько меньших шагов. Из исходного шаблона добавьте бутстрап 4 с номером npm, как вы уже сделали:

npm install [email protected] --save

Затем в src/styles/styles.scss вы хотите добавить пару импортных

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

Это по сути то же самое, что и @DanielDubovski показывает вам, но немного более традиционно иметь отдельный файл переопределений bootstrap, и вам больше не нужен размер по умолчанию, поскольку вы планируете переопределять значения по умолчанию для начальной загрузки, и вы, вероятно, не хотите случайно переопределить пользовательские цвета бутстрапа. Чтобы начать работу с src/styles/bootstrap-custom.scss, вы можете перейти в node_modules/bootstrap/scss/_variables.scss и просмотреть полный список переменных по умолчанию. Затем вы можете скопировать имена переменных, которые вы хотите обновить. Вот пример загрузки bootstrap-custom.scss, который просто переопределяет цвета оттенков серого:

/*
 * overrides for bootstrap defaults, you can add more here as needed,    see node_modules/bootstrap/scss/_variables.scss for a complete list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;

Ответ 4

npm install --save-dev sass-loader css-loader style-loader node-sass

на вашем webpack.config.js:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]