Question

在我的React应用中，我希望将style-loader / css-loader与Webpack一起用于从另一个节点模块react-quill - https://github.com/zenoamaro/react-quill导入样式表。我显然没有正确配置它，因为我的应用程序抛出错误

.ql-container {
^
SyntaxError: Unexpected token .
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/username/Desktop/Development/project/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/username/Desktop/Development/project/src/Quill/Quill.jsx:2:1)

关注react-quill个文档，我已使用

将样式表导入我的Quill.jsx组件

import theme from 'react-quill/dist/quill.snow.css'

和我的Webpack配置：

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: './public/bundle.js',
    publicPath: '/'
  },
  module: {
    loaders: [
      { 
        test: /\.jsx?$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
        query: {
          presets:['react','es2015','stage-2']
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      }
    ]
  }
}

并查看我的bundle.js，我可以看到Quill样式表已包含在构建中。

最后，其中一个错误引用babel-register，我在开发中使用它来处理服务器端渲染的即时转换 - 它显示为

require('babel-register')({
    presets: ['es2015','react','stage-2']
})

有人可以提供任何指导吗？

React - 带有Webpack / babel-register的意外css令牌

0 个答案: