意外的令牌，预期的；身体 {

Question

我想加载我的 css 文件。

在我的组件内部：

import '../assets/home/css/style.css'

我正在使用 'style-loader'、'css-loader' 但我收到以下错误消息：

SyntaxError: /Users/sm_emamian/Desktop/react js/shadyab/app/assets/home/css/style.css: Unexpected token, expected ; (1:5)
[0] > 1 | body {
[0]     |      ^
[0]   2 |   text-transform: capitalize;
[0]   3 |   font-family: FontAwesome,iransans,Helvetica,Arial,sans-serif;
[0]   4 |   background-color: #F2F2F2;
[0]     at Parser.pp$5.raise (/Users/sm_emamian/Desktop/react js/shadyab/node_modules/babylon/lib/index.js:4454:13)

我的 webpack.config.js：

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }

我的 style.css：

body {
  text-transform: capitalize;
  font-family: FontAwesome,iransans,Helvetica,Arial,sans-serif;
  background-color: #F2F2F2;
  overflow-x: hidden;
  color: #505050; }

...

更新：

我的 webpack.config.js：

var path = require('path')
var webpack = require('webpack')
var AssetsPlugin = require('assets-webpack-plugin')

var DEBUG = !(process.env.NODE_ENV === 'production')

if (DEBUG) {
  require('dotenv').config()
}

var config = {
  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
  entry: {
    app: ['./app/app'],
    vendor: [
      'react',
      'react-router',
      'redux',
      'react-dom',
      'lodash',
      'bluebird',
      'humps',
      'history'
    ]
  },
  resolve: {
    modules: [ path.join(__dirname, 'app'), 'node_modules' ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  plugins: [
    new webpack.EnvironmentPlugin(['NODE_ENV', 'API_BASE_URL']),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        include: __dirname
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}


if (DEBUG) {
  config.entry.app.push('webpack-hot-middleware/client?path=/__webpack_hmr')

  config.plugins = config.plugins.concat([
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filname: 'vendor.js'
    })
  ])
  config.output.publicPath = '/'
  config.module.rules.unshift({
    test: /\.js$/,
    loader: 'react-hot-loader',
    exclude: /node_modules/,
    include: __dirname
  })
} else {
  config.plugins = config.plugins.concat([
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      filname: '[name].[chunkhash].js'
    }),
    new webpack.optimize.UglifyJsPlugin(),
  ])
}

module.exports = config

Answer 1

请试试这个配置

 {
   test: /\.css$/,
   use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
     ]
}