Как включить npm-пакет materialize-css в webpack

Я пишу клиентское приложение, использующее Webpack, и не могу понять, как потребовать пакет materialize-css. Я использую пакет hjs-webpack Хенрика Йоретега, и вместе с ним пакет npm от buticss включен выполняет импорт в файл sass (например, @import 'yeticss'), но это не работает для материализации. Требовать его прямо в коде (например, import 'materialize-css' в файле JS), как и любой другой пакет, также не работает.


webpack npm css webpack-style-loader materialize
person neurodynamic    schedule 23.12.2015    source источник

Ответы (2)


arrow_upward
40
arrow_downward

В этом случае, в отличие от stillicss, вам нужно войти и потребовать определенные файлы, а не просто имя пакета, таким образом:

import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min';
person neurodynamic    schedule 23.12.2015
comment
спасибо, это должно быть где-то в официальной документации. - person Thibault Fouquaert; 12.06.2017
comment
Я несколько изменил это, чтобы импортировать materialize-css/dist/js/materialize.js и materialize-css/dist/css/materialize.css, поскольку основной пакет указывал на / dist / js - person Mike Lippert; 06.06.2018
comment
Насколько я понимаю, это идет в .js файл, но какой импорт нужно добавить в .css файл? - person kolen; 22.06.2020
comment
@kolen, вам нужно включить css-loader, чтобы это работало, как показано. Оба импорта предназначены для файла js. - person kchak; 28.07.2020

arrow_upward
10
arrow_downward

В моем случае я использую create-response-app, и я смог выполнить:

yarn add materialize-css

А затем в моем index.js (файл реакции верхнего уровня):

import '../node_modules/materialize-css/dist/css/materialize.min.css';
import '../node_modules/materialize-css/dist/js/materialize.min';
person brittohalloran    schedule 15.12.2017