Front end project construction error unexpected character ‘@’ solution

After I imported the CSS file of bootstrap, the following error messages appeared in the construction project:

ERROR in ./src/util/bootstrap/bootstrap.min.css
Module parse failed: D:\eclipseWorkspace\mbos\mbos-portal\webContent\src\util\bootstrap\bootstrap.min.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
    at Parser.pp$4.raise (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)

The reason is that the CSS file contains the @ symbol, and the configuration file does not specify a loader for the CSS file,

Solution: specify loader for CSS file:


{ 
	test: /\.css$/,
	loader: 'style-loader!css-loader' 
},

(a)’21442;’32771;65306;
styles.css Unexpected character’

Read More: