Mathis
/
namesny-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS is finally working

This commit is contained in:
LordMathis 2019-02-16 17:56:43 +01:00
parent 37e26287b8
commit 087435178c
4 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/cmrh.conf.js
View File

@ -1,10 +0,0 @@
var sass = require('node-sass');
module.exports = {
generateScopedName: '[name]__[local]___[hash:base64:5]',
extensions: ['.scss', '.css'],
preprocessCss: (data, filename) => sass.renderSync({
data,
file: filename,
}).css
}

5
src/server.js
View File

@ -1,7 +1,6 @@
import express from 'express' import express from 'express'
import fs from 'fs' import fs from 'fs'
import {serverRender} from './utils/serverRender' import {serverRender} from './utils/serverRender'
import csshook from 'css-modules-require-hook/preset'
const port = process.env.PORT || 3000; const port = process.env.PORT || 3000;
const app = express() const app = express()
@ -13,6 +12,10 @@ const app = express()
app.use('/static', express.static('public/static')) app.use('/static', express.static('public/static'))
app.get('/favicon.ico', (req, res) => {
res.status(404).send('Not Found !!!');
})
app.get("*", serverRender); app.get("*", serverRender);
app.listen(port, function(error) { app.listen(port, function(error) {

6
src/utils/serverRender.js
View File

@ -4,7 +4,6 @@ import { renderToString } from 'react-dom/server'
import { StaticRouter as Router, matchPath } from 'react-router-dom' import { StaticRouter as Router, matchPath } from 'react-router-dom'
import { App } from '../components' import { App } from '../components'
import routes from './routes' import routes from './routes'
import manifest from './manifest.json'
export function serverRender(req, res, next) { export function serverRender(req, res, next) {
@ -21,10 +20,6 @@ export function serverRender(req, res, next) {
</Router>, </Router>,
); );
console.log(req.url)
console.log(markup)
console.log()
res.status(200).send(renderFullPage(markup)); res.status(200).send(renderFullPage(markup));
}).catch(next) }).catch(next)
@ -42,6 +37,7 @@ function renderFullPage(html) {
<!-- Font Awesome --> <!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" rel="preload" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<!-- Stylesheet --> <!-- Stylesheet -->
<link href="static/bundle.css" rel="stylesheet" rel="preload">
</head> </head>
<body> <body>
<div id="root">${html}</div> <div id="root">${html}</div>

19
webpack.config.js
View File

@ -10,10 +10,9 @@ const nodeExternals = require('webpack-node-externals')
const browserConfig = { const browserConfig = {
mode: 'production', mode: 'production',
context: resolve(__dirname, 'src'),
entry: { entry: {
bundle: [ bundle: [
'./app-client.js' './src/app-client.js'
] ]
}, },
output: { output: {
@ -22,7 +21,7 @@ const browserConfig = {
// filename: '[name].[contenthash].js', // filename: '[name].[contenthash].js',
publicPath: '/static/' publicPath: '/static/'
}, },
devtool: "eval-source-map", // devtool: 'eval-source-map',
module: { module: {
rules: [ rules: [
{ {
@ -35,13 +34,13 @@ const browserConfig = {
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
//MiniCssExtractPlugin.loader, MiniCssExtractPlugin.loader,
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
modules: true, modules: true,
importLoaders: 2 importLoaders: 2,
// localIdentName: '[name]__[local]___[hash:base64:5]' localIdentName: '[name]__[local]___[hash:base64:5]'
} }
}, },
{ {
@ -65,7 +64,7 @@ const browserConfig = {
plugins: [ plugins: [
new webpack.DefinePlugin({__isBrowser__: "true"}), new webpack.DefinePlugin({__isBrowser__: "true"}),
new CleanWebpackPlugin(['public/static', 'build'], {}), new CleanWebpackPlugin(['public/static', 'build'], {}),
//new MiniCssExtractPlugin(), new MiniCssExtractPlugin(),
// new CompressionPlugin({}), // new CompressionPlugin({}),
new ManifestPlugin(), new ManifestPlugin(),
] ]
@ -92,6 +91,7 @@ const serverConfig = {
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
MiniCssExtractPlugin.loader,
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
@ -102,7 +102,7 @@ const serverConfig = {
} }
}, },
{ {
loader: "postcss-loader" loader: 'postcss-loader'
}, },
{ {
loader: 'sass-loader' loader: 'sass-loader'
@ -114,7 +114,7 @@ const serverConfig = {
exclude: /node_modules/, exclude: /node_modules/,
loader: 'url-loader', loader: 'url-loader',
options: { options: {
limit: 8192 limit: 10000
} }
}, },
] ]
@ -123,6 +123,7 @@ const serverConfig = {
new webpack.DefinePlugin({ new webpack.DefinePlugin({
__isBrowser__: "false" __isBrowser__: "false"
}), }),
new MiniCssExtractPlugin(),
] ]
} }