Getting: Unexpected token { expected ; while parsing pure CSS file - css

Question

The application builds successfully. But when I load it in the browser, it produces the error 'Unexpected token, expected ;' with a marker at the first { character in the css file. I believed I followed the docs but this error will not go away. Any idea what could be causing this error?
webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.jsx?$/,
use: 'eslint-loader',
exclude: /node_modules/,
include: Dir.src
}, {
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.json$/,
use: 'json-loader'
}, {
test: /\.woff2(\?[a-z0-9]+)?$/,
use: [{
loader: 'url-loader',
query: {
limit: 10000,
mimetype: 'application/font-woff2'
}
}]
}, {
test: /\.(eot|gif|jpe?g|mp+|png|svg|tff|wav|woff*)$/,
use: [{
loader: 'file-loader',
query: {
limit: 10000
}
}]
}, {
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'file-loader'
}, {
test: /favicon\.ico$/,
use: [{
loader: 'url-loader',
query: {
limit: 1,
name: '[name].[ext]',
}
}]
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.s[a,c]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
]
},
...
}
index.jsx
import React from 'react';
import './index.css';
...
index.css
div { text-overflow: ellipsis; }
button {
border-radius: 0 !important;
cursor: pointer;
padding: 0.6vh 1.2vw;
}
button, .btn, .form-control { border-width: 0.1vh 0.05vw; }
button, .btn, .btn > *, [class^='btn-'], [class^='btn'] > * { font-size: 1.8vmin; }
.btn-group-sm > .btn, .btn-sm {
font-size: 77%;
line-height: 1.5;
}
Produces:
+ 1446 hidden modules
webpack: bundle is now VALID.
{ SyntaxError: C:/simproduct/component/index.css: Unexpected token, expected ; (1:4)
> 1 | div { text-overflow: ellipsis; }
| ^
2 | button {
3 | border-radius: 0 !important;
4 | cursor: pointer;
at Parser.pp$5.raise (C:\simproduct\node_modules\babylon\lib\index.js:4454:13)
at Parser.pp.unexpected (C:\simproduct\node_modules\babylon\lib\index.js:1761:8)
at Parser.pp.semicolon (C:\simproduct\node_modules\babylon\lib\index.js:1742:38)
at Parser.pp$1.parseExpressionStatement (C:\simproduct\node_modules\babylon\lib\index.js:2236:8)

Answer 1

Try the following configuration for test: /.css$/. Make sure that you have postcss-loader in your configuration.
test: /\.css$/,
use: ['style-loader', {loader: 'css-loader', options: { importLoaders: 1 }},
'postcss-loader'
]
}
You will need to have postcss.config.js file; the same location you have your package.json. Add the following; or change is accordingly
module.exports = {
plugins: {
'postcss-import': {},
'postcss-cssnext': {
browsers: ['last 2 versions', '>5%']
}
}
};
Edit
Try to add the following query to your jsx loaders as follows:
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
query: {
presets: ['react', 'es2015','stage-1']
}
}