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. github.com/kriasoft/react-starter-kit — Darshan
@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 github.com/postcss/postcss-scss — zerkms
@user1775718 they have it configured for sure at this line: github.com/kriasoft/react-starter-kit/blob/master/tools/… + github.com/kriasoft/react-starter-kit/blob/master/… 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

Konstantin Tarkus Konstantin Tarkus · Accepted Answer · 2016-03-10T12:54:48

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 Answers