Unexpected token, expected ; body {

Question

I want to load my css files.

inside my component:

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

I'm using 'style-loader', 'css-loader' but I got this error message:

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)

my webpack.config.js:

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

my style.css:

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

...

updated:

my 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

no, because it's a template and I want to convert to reactjs. is it possible this error occure for my gulpfile.js? — S.M_Emamian, Mar 21 '18 at 15:08
Seems that styles loaders are fine. Can you setup a github project to check your problem? Also, you can review this [webpack-demo](https://github.com/carloluis/webpack-demo) - despite is using webpack 4, the styles config is similar. — Carloluis, Mar 22 '18 at 12:33

score 0 · Answer 1 · answered Mar 21 '18 at 15:03

0

Please try this config

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

answered Mar 21 '18 at 15:03

Efe

5,180
2
21
33

Are you able to show your whole webpack file? One more question, do you have declared `presets` for babel-loader in `.babelrc` file ? I think it is looking like more jsx parsing issue than css. – Efe Mar 21 '18 at 15:18
my .babelrc: `{ "presets": ["es2015", "react"], "env": { "test": { "plugins": [ "babel-plugin-rewire" ] } } } ` – S.M_Emamian Mar 21 '18 at 15:21
Your config is looking good to me, would you take a look at [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin#usage) ? – Efe Mar 21 '18 at 15:32

Unexpected token, expected ; body {

1 Answers1