@evilebottnawi and other community can help me to sort out it. I'll be thank full.
Please help out me, css is not rendering, even i configure css-loader. It is server side rendering, .ejs template used.
package.json
{
"name": "virkse-react-ssr",
"version": "1.0.0",
"description": "React server side rendering - complete basic website",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development && concurrently \"webpack --watch\" \"nodemon --exec babel-node src/server.js\""
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"compression": "^1.7.4",
"ejs": "^3.0.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"webpack": "^4.42.1"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.9.0",
"@babel/node": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"concurrently": "^5.1.0",
"css-loader": "^3.4.2",
"mini-css-extract-plugin": "^0.9.0",
"nodemon": "^2.0.2",
"style-loader": "^1.1.3",
"webpack-cli": "^3.3.11"
}
}
File which has stylesheet imported
import React from 'react'
import './header.css' <------------This is the issue, if i empty the stylesheet then issue resolve.
/** partial import */
import Logo from './partial/Logo'
import HeaderMenues from './partial/HeaderMenues'
class Header extends React.Component {
render() {
return (
<header>
<div className="header_inner">
</div>
</header>
);
}
}
export default Header;
My webpack.config.js file
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
mode: 'development',
entry: {
vendor: ["@babel/polyfill", "react"], // Third party libraries
index: ["./src/components/entrypoints/application.js"]
/// Every pages entry point should be mentioned here
},
output: {
path: path.resolve(__dirname, "src", "public"), //destination for bundled output is under ./src/public
filename: "[name].js" // names of the bundled file will be name of the entry files (mentioned above)
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
options: {
presets: ["@babel/preset-env", "@babel/preset-react"]
}
},
exclude: [/node_modules/, /public/]
},
{
//test: /\.(css|scss)$/,
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/style.css',
},
},
'css-loader',
]
},
{
test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
loader: 'url-loader?limit=10000'
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
})
],
resolve: {
extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
} // If multiple files share the same name but have different extensions, webpack will resolve the one with the extension listed first in the array and skip the rest.
};
module.exports = config;
@evilebottnawi and other community can help me to sort out it. I'll be thank full.
Please help out me, css is not rendering, even i configure css-loader. It is server side rendering, .ejs template used.
package.json
File which has stylesheet imported
My webpack.config.js file