Блог

У меня более 10 лет опыта в Python и Flask с основным упором на серверную часть и очень мало HTML JavaScript, но ноль CSS. Я начал работать с React и JavaScript около 6 недель назад и создавал простые приложения с использованием react, которые не требовали особого стиля. Однако теперь мне нужно сделать проект приличного размера с React, используя grommet для стилизации.

Я начал с react-boilerplate 1. После прочтения документов scss по шаблону и //github.com/grommet/grommet-standalone Readme, насколько я понимаю, мне нужно внести изменения в конфигурацию webpack, чтобы заставить загрузчик scss работать.

Мой env — win8.1 x64, узел 6.4.0

Вот что я изменил.

1. установлены оба sass-loader amp; node-sass

2. в internalswebpackwebpack.dev.babel.js измененном

 cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]amp;modulesamp;importLoaders=1amp;sourceMap!postcss-loader',
  

Для

 cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]amp;modulesamp;importLoaders=1amp;sourceMap!postcss-loader!sass-loader',
  

Обратите внимание на дополнительный !sass-загрузчик согласно //github.com/mxstbr/react-boilerplate/blob/master/docs/css/sass.md

3. Добавлено следующее в internalswebpackwebpack.base.babel.js

{ test: /.scss$/, loader: 'style!css!sass?outputStyle=compressed' }

@ строка 40 чуть ниже блока css, и

 sassLoader: {
  includePaths: [
    './node_modules',
    // this is required only for NPM < 3.
    // Dependencies are flat in NPM 3  so pointing to
    // the internal grommet/node_modules folder is not needed
    './node_modules/grommet/node_modules'
  ]
}
  

@строка 62 [ строка № 58, если вы ищете источник @ github в главной ветке //github.com/mxstbr/react-boilerplate/blob/master/internals/webpack/webpack.base.babel.js , 4 — это из-за добавления 4 строк для блока scss ]

4. в том же файле, добавленном '.scss' в resolve.extenstions массив.

5. Теперь, после этих изменений, я запускаю npm start и добавляю следующую строку в appcontainersAppindex.js Now после этих изменений я запускаю npm start и добавляю следующую строку в appcontainersAppindex.js

   import 'grommet/scss/vanilla/index';

согласно документации здесь //github.com/grommet/grommet-standalone

в cmd.exe консоль я получаю следующую ошибку

 ERROR in ./app/containers/App/index.js
Module not found: Error: Can't resolve 'grommet/scss/vanilla/index' in 'C:UserscoderfrontendappcontainersApp'
 @ ./app/containers/App/index.js 57:0-36
 @ ./app/app.js
 @ multi main
Child html-webpack-plugin for "index.html":
  

Излишне говорить, что grommet установлен, и файл присутствует в измененном расположении с расширением scss. Я, конечно, могу импортировать с расширением, так как import 'grommet/scss/vanilla/index.scss тогда я получаю следующую ошибку

 ERROR in ./~/css-loader!./~/style-loader!./~/css-loader!./~/sass-loader?outputStyle=compressed!./~/grommet/scss/vanilla/index.scss Module build failed: Unknown word (5:1)

  3 | // load the styles   4 | var content = require("!!./../../../css-loader/index.js!./../../../sass-loader/index.js?outputStyle=compressed!./index.scss");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
    | ^   6 | // add the styles to the DOM   7 | var update = require("!./../../../style-loader/addStyles.js")(content, {});   8 | if(content.locals) module.exports = content.locals;

 @ ./~/grommet/scss/vanilla/index.scss 4:14-189 13:2-17:4 14:20-195
  

Есть ли что-то очень очевидное, чего мне здесь не хватает? Похоже, что загрузчик scss не работает. Если вы успешно использовали grommet с react-boilerplate, пожалуйста, опубликуйте внесенные вами изменения.

PS: Переполнение стека сообщает мне, что я не могу публиковать более двух ссылок, поэтому я изменил ссылки, чтобы исключить https: из URL-адресов, пожалуйста, добавьте их вручную.

Для запуска встроенных стилей (тем) grommet вам не нужно будет устанавливать загрузчик sass или node-sass, пока вы не захотите настроить его стиль с помощью scss.

Поскольку вы установили пакет grommet, он содержит уменьшенный css для поддерживаемых тем внутри самого модуля node, который вы можете напрямую использовать для импорта в свое приложение.

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

 import 'grommet/grommet.min.css';
  

Это уменьшенный файл css, поэтому вам не нужно будет обрабатывать файлы scss из grommet. Это будет работать как простой файл css.

В дополнение к этому вы также можете выбрать различные доступные темы из grommet. Для этого также доступен упрощенный css. Вот список этих css:

1. grommet.min.css
2. grommet-hpinc.min.css
3. grommet-hpe.min.css
4. grommet-aruba.min.css

В ваш файл «webpack.config.json» добавьте следующее, это извлечено из документа grommet для автономной установки, мое выглядит следующим образом:

 // Development rules
rules.push(
{
  test: /.scss$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader', options: {
        sourceMap:true,
        includePaths: ['./node_modules', './node_modules/grommet/node_modules']
      }
    }        
  ],
}
);
  

Следующее
Перейдите к своему основному файлу sass. Мой называется «app.scss» и находится внутри основной папки «scss», внутри которой у меня есть следующий код:

 @import '~grommet/scss/aruba/index'; // or @import '~grommet/scss/vanilla/index'; any grommet theme
@import "base/normalize";
@import "base/breakpoints";
@import "base/app";
  

Теперь grommet sass должен быть доступен для всего проекта, обратите внимание, что здесь вы можете изменить тему Grommet по своему усмотрению.