Webpack CSS loader won't parse comments

Question

I'm using react starter kit and I'm trying to import the SCSS files from bootstrap (installed via NPM) and it's complaining about the comments:

    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

Here's the import in app.js

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

Then put it through the webpack loaders:

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

Does anybody have any ideas why?

Thanks

James

Are you using this react starter kit. https://github.com/kriasoft/react-starter-kit — Darshan, Mar 06 '16 at 18:48
@user1775718 is there any particular reason you are using bootstrap-sass instead of bootstrap — Darshan, Mar 07 '16 at 12:45
@zerkms Not sure about your question. The loaders (iso, css-loader & postcss-loader) handles scss processing... — user1775718, Mar 07 '16 at 20:45
@Darshan TBH, I only wanted the stylesheets in the beginning. There's nothing to stop me using the Bootstrap module. It was just odd that it faulted on a comment which is legal in SASS... — user1775718, Mar 07 '16 at 20:46
@user1775718 "The loaders (iso, css-loader & postcss-loader) handles scss processing" --- no they are not. `css-loader` loads css, and `postcss-loader` by itself does literally nothing and requires additional transformers to be applied. Check this https://github.com/postcss/postcss-scss — zerkms, Mar 07 '16 at 20:56
@zerkms If you download the react starter kit (link above) you can see that all the style files are .scss and those loaders are what handles them (hence the test). That webpack loaders config is written in that kit, not by me. To be fair to you, I struggled to see how those loaders would handle it, but they do... I've just downloaded the latest version, so I'm going to test it in that too. — user1775718, Mar 08 '16 at 22:28
@user1775718 they have it configured for sure at this line: https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js#L81 + https://github.com/kriasoft/react-starter-kit/blob/master/package.json#L77 while you don't have anything like that. I'm not sure why you haven't searched for the `scss` string through the config, since it's the easiest way to find it out. "not by me" --- then there should be a good reason on why what you have posted is different from what they have in the repository. — zerkms, Mar 08 '16 at 22:48
To anyone else, I'm guessing from what research I've done that the post-css loader loads all the postcss plugins from the node_modules directory. In there is postcss-nested. I think it's interpreted through that (there's certainly no postcss-scss in there...) — user1775718, Mar 10 '16 at 01:51

score 2 · Accepted Answer · answered Mar 10 '16 at 12:54

You may want to load 3rd party .scss files with sass-loader instead of postcss+precss+postcss-scss parser that comes by default in RSK.

$ npm install sass-loader --save-dev

Webpack allows you to configure what loader to use for which file either via webpack.config.js (preferred) or explicitly in "import" statements. For example, try adding this line in your CSS:

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

Webpack CSS loader won't parse comments

1 Answers1