Webpack CSS loader 不会解析注释

Question

我正在使用 React 入门工具包，我正在尝试从 bootstrap（通过 NPM 安装）导入 SCSS 文件，它抱怨评论：

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

然后通过 webpack 加载器将其放入：

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

有人知道为什么吗？

谢谢

詹姆斯

Answer 1

您可能想要加载第 3 方 .scss 文件 sass-loader instead of postcss+precss+postcss-scss parser that comes by default in RSK。

$ npm install sass-loader --save-dev

Webpack 允许您通过 webpack.config.js（首选）或在 "import" 语句中显式配置 loader 用于哪个文件。例如，尝试在 CSS:

中添加这一行

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

Webpack CSS loader 不会解析注释

Webpack CSS loader won't parse comments

reactjs

css-loader

react-starter-kit