Question

我正在尝试使用Express作为后端服务器来配置ReactJS应用程序。我正面临着.css文件的问题，当我运行'npm start'时，我收到了这个错误。

/client/app.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .layoutHeader {
|   background: #00AAFA;}

这是我的应用程序配置。

的package.json

 "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' server/server.js"
  },
  "dependencies": {


    "body-parser": "^1.17.1",
    "ejs": "^2.5.6",
    "express": "^4.15.2",
    "moment": "^2.18.1",
    "mongoose": "^4.9.6",
    "react": "^15.5.4",
    "react-bootstrap": "^0.30.10",
    "react-dom": "^15.5.4",
    "react-router": "^2.4.0",
    "react-router-redux": "^4.0.8",
    "redux": "^3.6.0",
    "request": "^2.81.0"
  },
  "devDependencies": {


    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "nodemon": "^1.11.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-middleware": "^1.10.2",
    "webpack-hot-middleware": "^2.18.0"
  }

webpack.config.js

module.exports = {

    devtool: "",
    entry: [
        'webpack-hot-middleware/client',
        path.join(path.resolve(__dirname), 'client', 'client.js')
    ],
    output: {
        path: path.join(path.resolve(__dirname), 'public', 'js'),
        filename: 'bundle.js',
        publicPath: '/js/'
    },
    module: {
        loaders: [
        {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            cacheDirectory: 'babel_cache',
          presets: debug ? ['es2015', 'react'] :  ['react', 'es2015']
        }
        }
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'style-loader!css-loader',
      }, {
        test: /\.css$/,
        include: /node_modules/,
        loaders: ['style-loader', 'css-loader'],
      }     
        ]
    },
}

我没有在.babelrc文件中配置任何内容。

我想为每个组件编写单独的CSS，并且只能导入到该组件。

我想我错过了一些关于babel的配置，请帮我配置这个应用程序。

提前致谢。

Answer 1

webpack配置看起来正确。可能是导入CSS的问题，它必须像这样：

import './style.css'; where './' is path.

如果你想为每个组件编写CSS，我建议你看看CSS模块https://github.com/css-modules/css-modules

Answer 2

如果您使用的是webpack-dev-middleware，则需要确保使用webpack配置进行配置：

const webpack = require('webpack');

const webpackDevMiddleware = require('webpack-dev-middleware');

const webpackConfig = require('path/to/webpack.config.js');

const compiler = webpack(webpackConfig);

module.exports = webpackDevMiddleware(compiler, { /* options */ }

Answer 3

在你的webpack配置中第一次加载后没有逗号。

Babel编译CSS文件

3 个答案: