javascript - Webpack 抛出意外的 token 错误

Question

在我的 react 组件中，网络包抛出以下错误，我不确定哪里出了问题。还添加了 webpack.config 文件 ` 从 'react' 导入 React, {Component} 导入'./Banner.css'

class Banner extends Component {
    constructor(props){

        super(props)
    }
    render(){
        return(
            <p>
                 What are you doing
            </p>
        );
    }
}
export default Banner;`

错误如下:
ERROR in ./src/components/Banner.js Module parse failed: /Users/allenord/Documents/Developer/PersonalPage/src/components/Banner.js Unexpected token (13:8) You may need an appropriate loader to handle this file type. | render(){ | return( | <p> | What are you doing | </p> @ ./src/app/index.jsx 11:14-48 @ multi (webpack)-dev-server/client?http://localhost:3000 ./src/app/index.jsx

webpack.config

var config = {
   entry: APP_DIR + '/index.jsx',
   output: {
   path: BUILD_DIR,
   filename: 'bundle.js'
},
module : {
loaders : [
  {
    test : /\.jsx?/,
    include : APP_DIR,
    loader : 'babel-loader'
  },
  {
    include:'/src',
    test    : /\.scss$/,
    loaders : [
      'style-loader',
      'css-loader?sourceMap&-minimize',
      'postcss',
      'sass?sourceMap'
    ]
  },
  {
    include:'/src',
    test    : /\.css$/,
    loaders : [
      'style-loader',
      'css-loader?sourceMap&-minimize'
    ]
  }
]
},

Answer 1

你需要添加一个 Webpack 加载器才能导入任何不是 JS 的东西。在你的情况下，你需要一个 CSS 加载器来使行 import './Banner.css' 工作。

更多信息:https://webpack.js.org/loaders/#styling