CSS Modules - Unexpected Token

Question

I am trying to create CSS modules with React components. My code is as follows:

import styles from './style.css'; const Header = () => { return ( <header className={styles.main}></header> ) }; export default Header; 

CSS is simple

 .main { background: red; } 

And webpack configuration:

 var ExtractTextPlugin = require('extract-text-webpack-plugin'); var BrowserSyncPlugin = require('browser-sync-webpack-plugin'); var WebpackNotifierPlugin = require('webpack-notifier'); var precss = require('precss'); var autoprefixer = require('autoprefixer'); var path = require('path'); var sassLoaders = [ 'css-loader?modules', 'postcss-loader?modules', 'sass-loader?sourceMaps&modules&includePaths[]=' + path.resolve(__dirname, './sass') ]; var config = { entry: './app/index.js', output: { path: 'public', filename: 'index.js' }, sassLoader: { includePaths: path.resolve(__dirname, './sass') }, plugins: [ new WebpackNotifierPlugin({ title: 'Webpack', alwaysNotify: true }), new ExtractTextPlugin('style.css'), new BrowserSyncPlugin({ port: 7000, ui: false, proxy: 'http://localhost:3000/' }) ], module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel', query: { presets: ['es2015', 'react', 'stage-0'] } }, { test: /\.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' }, { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')) } ] }, postcss: function() { return [ precss, autoprefixer({ browsers: ['last 2 versions'] }) ]; } }; module.exports = config; 

The problem occurs when I want to run my code. This is regardless of whether I include a scss or css file, I always get

 [0] SyntaxError: style.css: Unexpected token (1:0) [0] > 1 | .main { [0] | ^ [0] 2 | background: red; [0] 3 | } 

What can I do?

Answer 1

You do not need to specify the name of the import, you just import the path of your css as follows:

 import './style.css'; 

Then your web package will know what to do. Otherwise, it thinks that you are trying to import some kind of js module and it gives a syntax error message.