Search code examples
reactjscss-loaderreact-starter-kit

Webpack CSS loader won't parse comments

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

Solution

  • 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';