You may need an appropriate loader to handle this file type with Webpack and CSS

Problem I

If you use create-react-app, you may not face this problem.

If you use the old applicate framework, it may have this problem

ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css
Module parse failed: node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
|  */
| /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
|   font-family: sans-serif;
|   -webkit-text-size-adjust: 100%;

Solution

Install following packages:

npm install css-loader --save-dev
npm install style-loader --save-dev
npm install file-loader --save-dev

Add following rules in your webpack.config.js

rules: [
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            {
                test: /\.(woff|woff2|ttf|svg|eot)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            }]

Problem II

If you run npm test, it may have this problem

 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-...
SyntaxError: Unexpected token {
    at createScript (vm.js:53:10)
    at Object.runInThisContext (vm.js:95:10)

Solution

Install following packages:

npm install ignore-styles --save-dev

Add --require ignore-styles to your test scripts. For example, following is my script:

"test": "BABEL_ENV=test mocha $(find test -path '*Spec.js') --require ignore-styles"

Tags:

Categories:

Updated: