Загрузчик CSS Webpack не будет анализировать комментарии

Question

Загрузчик CSS Webpack не будет анализировать комментарии

0

Я использую реактивный стартовый набор, и я пытаюсь импортировать файлы SCSS из загрузочного файла (установленного через NPM), и он жалуется на комментарии:

    ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader!./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss
/Users/jamessherry/sites/business_website/node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss:7:1: Unknown word

// Core variables and mixins
^
@import "bootstrap/variables";

ERROR in ./~/css-loader?sourceMap&modules&localIdentName=[name]_[local]_[hash:base64:3]!./~/postcss-loader!./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (/Users/jamessherry/sites/business_website/node_modules/postcss/lib/input.js:31:23)
    at parse (/Users/jamessherry/sites/business_website/node_modules/postcss/lib/parse.js:22:17)
    at new LazyResult (/Users/jamessherry/sites/business_website/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/Users/jamessherry/sites/business_website/node_modules/postcss/lib/processor.js:34:16)
    at processCss (/Users/jamessherry/sites/business_website/node_modules/css-loader/lib/processCss.js:188:11)
    at Object.module.exports (/Users/jamessherry/sites/business_website/node_modules/css-loader/lib/loader.js:24:2)
 @ ./~/bootstrap-sass/assets/stylesheets/_bootstrap.scss 2:18-178 18:6-24:8 19:25-185

Здесь импорт в app.js

import emptyFunction from 'fbjs/lib/emptyFunction';
import './../../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import s from './App.scss';

Затем поместите его через загрузчики веб-пакетов:

, {
    test: /\.scss$/,
    loaders: [
      'isomorphic-style-loader',
      'css-loader?' + (DEBUG ? 'sourceMap&' : 'minimize&') +
      'modules&localIdentName=[name]_[local]_[hash:base64:3]',
      'postcss-loader',
    ],
  }

У кого-нибудь есть идеи, почему?

благодаря

Джеймс

user1775718 06 март 2016, в 19:16

Источник

0

Вы используете этот стартовый набор для реакции? github.com/kriasoft/react-starter-kit
Darshan 06 март 2016, в 18:48
0

@Darshan Даршан Да, я ... :)
user1775718 06 март 2016, в 20:22
0

Так где же твой загрузчик scss ?
zerkms 07 март 2016, в 01:44
0

@user1775718 user1775718, есть ли какая-то особая причина, по которой вы используете bootstrap-sass вместо bootstrap
Darshan 07 март 2016, в 12:45
0

@zerkms Не уверен насчет вашего вопроса. Загрузчики (iso, css-loader & postcss-loader) обрабатывают обработку scss ...
user1775718 07 март 2016, в 20:45
0

@Darshan TBH, я только хотел таблицы стилей в начале. Ничто не мешает мне использовать модуль Bootstrap. Было просто странно, что он ошибся в комментарии, который является законным в SASS ...
user1775718 07 март 2016, в 20:46
1

@user1775718 user1775718 "Загрузчики (iso, css-loader & postcss-loader) обрабатывают обработку scss" --- нет, это не так. css-loader загружает css, а postcss-loader сам по себе буквально ничего не делает и требует применения дополнительных преобразователей. Проверьте это github.com/postcss/postcss-scss
zerkms 07 март 2016, в 20:56
0

@zerkms Если вы загрузите начальный комплект реагирования (ссылка выше), вы увидите, что все файлы стилей являются .scss, и именно эти загрузчики обрабатывают их (отсюда и тест). Конфигурация загрузчиков webpack написана в этом комплекте, а не мной. Честно говоря, я изо всех сил пытался понять, как эти загрузчики справятся с этим, но они справляются ... Я только что скачал последнюю версию, так что я собираюсь проверить и ее тоже.
user1775718 08 март 2016, в 22:28
1

@user1775718 user1775718 они точно настроили его в этой строке: github.com/kriasoft/react-starter-kit/blob/master/tools/… + github.com/kriasoft/react-starter-kit/blob/master/… у тебя ничего такого нет. Я не уверен, почему вы не искали строку scss в конфиге, так как это самый простой способ выяснить это. «не мной» - тогда должна быть веская причина, почему то, что вы опубликовали, отличается от того, что у них есть в хранилище.
zerkms 08 март 2016, в 22:48
0

Для кого-то еще, я предполагаю, что из проведенного мною исследования загрузчик post-css загружает все плагины postcss из каталога node_modules. В есть postcss-вложенные. Я думаю, что это интерпретируется через это (там, конечно, нет postcss-scss ...)
user1775718 10 март 2016, в 01:51

Показать ещё 8 комментариев

Теги:

reactjs

css-loader

react-starter-kit

1 ответ

Ещё вопросы

Вы используете этот стартовый набор для реакции? github.com/kriasoft/react-starter-kit
@user1775718 user1775718, есть ли какая-то особая причина, по которой вы используете bootstrap-sass вместо bootstrap
@zerkms Не уверен насчет вашего вопроса. Загрузчики (iso, css-loader & postcss-loader) обрабатывают обработку scss ...
@Darshan TBH, я только хотел таблицы стилей в начале. Ничто не мешает мне использовать модуль Bootstrap. Было просто странно, что он ошибся в комментарии, который является законным в SASS ...
@user1775718 user1775718 "Загрузчики (iso, css-loader & postcss-loader) обрабатывают обработку scss" --- нет, это не так. css-loader загружает css, а postcss-loader сам по себе буквально ничего не делает и требует применения дополнительных преобразователей. Проверьте это github.com/postcss/postcss-scss
@zerkms Если вы загрузите начальный комплект реагирования (ссылка выше), вы увидите, что все файлы стилей являются .scss, и именно эти загрузчики обрабатывают их (отсюда и тест). Конфигурация загрузчиков webpack написана в этом комплекте, а не мной. Честно говоря, я изо всех сил пытался понять, как эти загрузчики справятся с этим, но они справляются ... Я только что скачал последнюю версию, так что я собираюсь проверить и ее тоже.
@user1775718 user1775718 они точно настроили его в этой строке: github.com/kriasoft/react-starter-kit/blob/master/tools/… + github.com/kriasoft/react-starter-kit/blob/master/… у тебя ничего такого нет. Я не уверен, почему вы не искали строку scss в конфиге, так как это самый простой способ выяснить это. «не мной» - тогда должна быть веская причина, почему то, что вы опубликовали, отличается от того, что у них есть в хранилище.
Для кого-то еще, я предполагаю, что из проведенного мною исследования загрузчик post-css загружает все плагины postcss из каталога node_modules. В есть postcss-вложенные. Я думаю, что это интерпретируется через это (там, конечно, нет postcss-scss ...)

Konstantin Tarkus · Accepted Answer · 2016-03-10T13-57-00.000Z

Возможно, вы захотите загрузить сторонние .scss файлы с помощью sass-loader вместо postcss + precss + postcss-scss парсера, который по умолчанию используется в RSK.

$ npm install sass-loader --save-dev

Webpack позволяет вам настроить, какой загрузчик использовать для какого файла, либо через webpack.config.js (предпочтительно), либо явно в операторах "import". Например, попробуйте добавить эту строку в свой CSS:

@import '!!sass!../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';