.css Module parse failed

Asked
Active3 hr before
Viewed126 times

9 Answers

parsefailedmodule
90%

Your error means that webpack does not know how to parse css files.,To resolve this problem you need to npm install --save-dev style-loader css-loader and in your webpack file include those loaders as follows, What does one need to know to learn to improvise with other musicians?

To resolve this problem you need to npm install --save-dev style-loader css-loader and in your webpack file include those loaders as follows

module: {
   loaders: [{
         test: /\.js$/,
         exclude: /node_modules/,
         loaders: 'babel',
         query: {
            presets: ['react', 'es2015', 'stage-1']
         }
      },
      {
         test: /\.css$/,
         loader: "style-loader!css-loader"
      }
   ]
}
load more v
88%

Added footer.css file inside app/components/Footer/footer.css,Trying to load this file inside app/components/Footer/index.js as import footer from './footer.css'; , Pricing Plans → Compare plans → Contact Sales → Education →

// Import for cesium
window.CESIUM_BASE_URL = './lib';
require('./lib/Cesium/Cesium.js');
require('./lib/Cesium/Widgets/widgets.css');
var Cesium = window.Cesium;
load more v
72%

In this example, we reference topbanner.svg from the CSS. When css-loader sees this line, it tells webpack to load this file using an appropriate loader. For this to work you also need to configure a SVG loader, because the file is a SVG file:,you still use the css-loader and the style-loader. No extra dependencies are needed. But the difference to configuring CSS is that you add two options to css-loader.,As you can see in the config, you need to use two loaders, style-loader and css-loader. You also need to install them as NPM dependencies:

body {
   color: white;
   background - color: black;
}
load more v
65%

Vue-this hackernews: Module build failed: SyntaxError: Unexpected token?,How to fix Module build failed: ReferenceError: document is not defined at the vue material and webpack?,Why webpage error Module parse failed?

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
module.exports = {
   entry: './src/index.js',
   output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
   },
   module: {
      rules: [{
         test: /\.scss$/,
         use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
         })
      }]
   },
   plugins: [new ExtractTextPlugin('style.css')],
   resolve: {
      extensions: ['.js', '.scss']
   }
}
load more v
75%

Ask questionsModuleParseError: Module parse failed: Invalid regular expression flag

Pretag
 Pretag team - issue, fix, solve, resolve
40%

Install the alpha version npm i -D [email protected] --save. Then install css-loader, sass-loader and node-sass.,Edit: Just as a side note, apparently mini-css-extract-plugin works fine with webpack 4.

In my styles.scss file, I am doing the following:

@import 'scss/variables.scss';

*{
   margin: 0;
   padding: 0;
   box - sizing: border - box;
}

body {
   font - family: Arial, Helvetica, sans - serif;
}

In my index.js file, I am only doing the following:

import './style.scss';

In my webpack.dev.js, all I changed was an addition of mode: 'development':

const StyleLintPlugin = require('stylelint-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
   mode: 'development',
   entry: './src/index.js',
   output: {
      filename: 'public/bundle.js'
   },
   module: {
      rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: ['babel-loader', 'eslint-loader']
         },
         {
            test: /.scss$/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
         }
      ]
   },
   plugins: [
      new StyleLintPlugin({
         configFile: '.stylelintrc',
         context: 'src',
         files: '**/*.scss',
         failOnError: false,
         quiet: false,
         syntax: 'scss'
      }),
      new ExtractTextPlugin('public/style.css'),
      new Dotenv()
   ]
};

Here are the relevant dependencies in my package.json:

"babel-loader": "^7.1.4",
"css-loader": "^0.28.11",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.0",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"stylelint-webpack-plugin": "^0.10.5",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.4"

Here are the relevant scripts in my package.json file, for reference in the comments:

"scripts": {
   "watch": "./node_modules/.bin/webpack --mode development --watch --progress",
   "build": "./node_modules/.bin/webpack --mode production"
},
load more v
22%

You may need an appropriate loader to handle this file type.,Any tips appreciated - perhaps I have to edit webpack config in a way? Or should this be handled already, since I see a test for .css files in it.,Will just add another solution as a reference: you can also import CSS for any lib separately in a relevant scss. No need to include everything via JS if you want to separate css/js clearly. An example for Magnific Popup lib:

I was following https://openlayers.org/en/latest/doc/tutorials/bundle.html and when importing it says:

in . / node_modules / ol / ol.css
Module parse failed: Unexpected token(1: 0)
You may need an appropriate loader to handle this file type. |
   .ol - box {
      |
      box - sizing: border - box; |
      border - radius: 2 px;
load more v
60%

Module parse failed: Unexpected character '' You may need an appropriate loader to handle this file type. ,Even if I don't import the .css file I get these errors related to the assets,Whenever I try to import:

Whenever I try to import:

import {
   Chat,
   Channel,
   ChannelHeader,
   ChannelList,
   MessageList,
   MessageInput,
   Thread,
   Window,
} from 'stream-chat-react';
import 'stream-chat-react/dist/css/index.css';

The error(s)

> [error] >
. / node_modules / stream - chat - react / dist / assets / Poweredby_100px - White_VertText.png >
   1: 0 Module parse failed: Unexpected character '�'(1: 0) You may need >
   an appropriate loader to handle this file type.(Source code omitted >
      for this binary file) ModuleParseError: Module parse failed:
   >
   Unexpected character '�'(1: 0) You may need an appropriate loader to >
   handle this file type.(Source code omitted
      for this binary file) >
   >
   Module parse failed: Unexpected character '@'(4: 0) You may need an >
   appropriate loader to handle this file type. | /* colors */ |
   /*
> miscellaneous */
   >
   > @import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,700,700i");

And my next.config.js

const {
   withPlugins,
   optional
} = require('next-compose-plugins')
const {
   PHASE_PRODUCTION_BUILD
} = require('next-server/constants')
const sass = require('@zeit/next-sass')
const {
   requireEnvVar
} = require('./lib/nodeUtils')

const nextConfig = {
   publicRuntimeConfig: {
      ...
   },

   useFileSystemPublicRoutes: false,

   webpack(config, {
      webpack
   }) {
      config.plugins.push(
         new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /en/)
      )

      return config
   },
}

module.exports = withPlugins(
   [
      [sass],
      [
         optional(() => require('@zeit/next-bundle-analyzer')),
         {
            analyzeServer: ['server', 'both'].includes(process.env.BUNDLE_ANALYZE),
            analyzeBrowser: ['browser', 'both'].includes(
               process.env.BUNDLE_ANALYZE
            ),
            bundleAnalyzerConfig: {
               server: {
                  analyzerMode: 'static',
                  reportFilename: '../../bundles/server.html',
               },
               browser: {
                  analyzerMode: 'static',
                  reportFilename: '../bundles/client.html',
               },
            },
         },
         [PHASE_PRODUCTION_BUILD],
      ],
   ],
   nextConfig
)
load more v
48%

The matched files can be processed through asset modules by using the type field at a loader definition. The feature is discussed in the Loading Assets part of the book.,Although the loading approach covered here is enough for development purposes, it's not ideal for production. You'll learn why and how to solve this in the next chapter by separating CSS from the source.,css-loader doesn't touch absolute nor root relative imports by default. It allows customization of loading behavior through the importLoaders option. You can lookup against node_modules by prefixing your imports with a tilde (~).

To get started, install the dependencies:

npm add css - loader style - loader--develop
load more v

Other "parse-failed" queries related to ".css Module parse failed"