React-шаблона + grommet, что делает sass работать с webpack

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

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

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

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

установлены оба sass-loader и node-sass
в internals\webpack\webpack.dev.babel.js изменено

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

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

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

В internals\webpack\webpack.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'
  ]
}

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

в том же файле добавлен '.scss' в массив resolve.extenstions.
Теперь после этих изменений я запускаю npm start и добавляю следующую строку в app\containers\App\index.jsNow, после этих изменений я запускаю npm start и добавляю следующую строку в app \ container \ App \ index.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:\Users\coder\frontend\app\containers\App'
 @ ./app/containers/App/index.js 57:0-36
 @ ./app/app.js
 @ multi main
Child html-webpack-plugin for "index.html":

Излишне говорить, что втулка установлена, и файл присутствует в размещенном месте с расширением 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

Я исчерпал свои навыки работы с google fu, чтобы исправить это. Есть ли что-то очень очевидное, чего мне здесь не хватает? Похоже, что загрузчик scss не работает. Любые направления будут очень полезны. Если вы успешно использовали втулку с реактивным шаблоном, опубликуйте внесенные вами изменения.

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

user2767799 02.10.2016 источник

Ответы (2)

arrow_upward
2
arrow_downward

Чтобы запустить встроенные стили (темы) втулки, вам не нужно устанавливать sass-loader или node-sass, пока вы не захотите настроить его стиль с помощью scss.

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

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

import 'grommet/grommet.min.css';

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

В дополнение к этому вы также можете выбрать различные доступные темы из люверсов. Для этих тем также доступны миниатюрные CSS-файлы. Вот список этих CSS:

grommet.min.css
grommet-hpinc.min.css
втулка-hpe.min.css
grommet-aruba.min.css

Pathik Mehta 08.11.2016

arrow_upward
0
arrow_downward

У меня была такая же проблема. Мой друг помог мне решить эту проблему, сделав следующее: в вашем файле "webpack.config.json" добавьте следующее, это извлечено из документа с люверсами для автономной установки, моя следующая:

// 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";

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

Надеюсь, это поможет, ура!

David I. Rock 13.06.2017

React-шаблона + grommet, что делает sass работать с webpack

Ответы (2)

Вопросы по теме