How to parse CSS files?

[amanjaggaPracto]

I am getting syntax errors in the CSS files while generating static html.The CSS files are separate files which gets imported in related components. I am not using any CSS library.
This is the command I used.

x0 build src/App.js --out-dir site

and this is the error I am getting

[Matthew Kosloski]

I think you need to create a custom webpack.config.js file. Try this out:

App.js:

import React, { Fragment } from 'react';
import css from './style.css';

export default () => (
	<Fragment>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>Embedded CSS with x0</title>
		<style dangerouslySetInnerHTML={{__html: css}}></style>
		<h1>Hello</h1>
		<p>Hello world!</p>
	</Fragment>
);

style.css:

body {
	background: #ccc;
}

Install css-loader via NPM and add a rule to a partial webpack.config.js file.

npm install css-loader --save

webpack.config.js:

module.exports = {
	module: {
		rules: [
			{test: /\.css$/, use: ['css-loader']}
		]
	}
}

Make sure to include the --config flag in your NPM script:

--config webpack.config.js

[John Otander]

As @MatthewKosloski states, you need a custom webpack to achieve this. In v5 we will now automatically pick up a webpack.config.js and merge it with x0's defaults.