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 fs from 'fs'
import {serverRender} from './utils/serverRender'
import csshook from 'css-modules-require-hook/preset'
const port = process.env.PORT || 3000;
const app = express()
@ -13,6 +12,10 @@ const app = express()
app.use('/static', express.static('public/static'))
app.get('/favicon.ico', (req, res) => {
res.status(404).send('Not Found !!!');
})
app.get("*", serverRender);
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 { App } from '../components'
import routes from './routes'
import manifest from './manifest.json'
export function serverRender(req, res, next) {
@ -21,10 +20,6 @@ export function serverRender(req, res, next) {
</Router>,
);
console.log(req.url)
console.log(markup)
console.log()
res.status(200).send(renderFullPage(markup));
}).catch(next)
@ -42,6 +37,7 @@ function renderFullPage(html) {
<!-- 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">
<!-- Stylesheet -->
<link href="static/bundle.css" rel="stylesheet" rel="preload">
</head>
<body>
<div id="root">${html}</div>

19
webpack.config.js
View File

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