scss没有应用投掷错误

时间:2017-03-30 05:39:08

标签: reactjs

我正在使用webpack 2和节点6.9并尝试在我的项目中实现css / scss。我安装了所有必需的加载器,如样式,sass等。下面是我的webpack配置,它工作正常,但scss不适用于我的项目,

rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            options: {
                cacheDirectory: true
            }
        }]

应用css我已经安装了所有的加载器,我将上面的webpack配置改为

rules: [{
           test: /\.scss$/,
loader: ExtractTextPlugin.extract({
  fallbackLoader: 'style-loader',
  loader: [
    'css-loader',
    'babel-loader',
    'postcss',
    {
      loader: 'sass-loader',
      query: {
        sourceMap: false,
        presets: ['es2015'],
      }
    }
  ],
})
        }]
    };
    plugins: [
new ExtractTextPlugin("style.css"),
  ]

但它仍然不适合我。我也试过了一些其他的配置,但每次它给我同样的错误,如下所示,

Uncaught Error: Module parse failed: \index.js Unexpected token (7:3)
 You may need an appropriate loader to handle this file type.

ReactDOM.render((
 <App />
), document.getElementById('root'));
at Object.<anonymous> (bootstrap 6298272…:708)
at __webpack_require__ (bootstrap 6298272…:659)
at bootstrap 6298272…:708
at bootstrap 6298272…:708

任何人都可以帮助我摆脱错误并应用scss。在此先感谢!!

1 个答案:

答案 0 :(得分:0)

能够使它工作。下面是coode,

rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.scss$/,
            loaders: [ "style-loader", "css-loader", 'sass-loader' ],
        }]