nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Not working with React and Webpack #95

Closed DracotMolver closed 6 years ago

DracotMolver commented 6 years ago

Im using React and Webpack. The rendered HTML is displayed well, but there isn't any css styles like .grid-container.

My webpack config:

const path = require('path')
const glob = require('glob-all')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const webpack = require("webpack");
const PurifyCSSPlugin = require('purifycss-webpack')

const extractSass = new ExtractTextPlugin({
    filename: 'style.css',
    allChunks: true,
});

const DEV = path.resolve(path.join(__dirname, 'client', 'dev'));
const OUTPUT = path.resolve(path.join(__dirname, 'client', 'output'));

const config = {
    entry: DEV + '/index.jsx',
    output: {
        path: OUTPUT,
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react']
                    }
                }
            },
            { // -======= CSS =======-
                test: /\.css$/,
                use: extractSass.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                url: false
                            }
                        }
                    ]
                })
            },
            { // -======= SASS =======-
                test: /\.sass$/,
                use: extractSass.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                url: false
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                url: false
                            }
                        }
                    ]
                })
            }
        ]
    },
    plugins: [
        extractSass,
        new PurifyCSSPlugin({
            minimize: true,
            paths: glob.sync([
                path.join(OUTPUT, '*.html')
            ]),
            purifyOptions: {
                whitelist: ['*anim*']
            }
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"development"'
        })
    ]
}

module.exports = config;

and my React file

import {
    Grid,
    GridContainer
} from 'unsemantic';
...
            <GridContainer>
                <Grid desktop="40">
                    <form onSubmit={this.authUser}>
                        <Grid desktop="100">
                            <span>Corssover Video Portal</span>
                        </Grid>
                        <Grid desktop="100">
                            <label htmlFor="username">User name</label>
                            <input type="text" id="username" ref={u => this._inputUsername = u}></input>
                        </Grid>
                        <Grid desktop="100">
                            <label htmlFor="username">Password</label>
                            <input type="text" id="password" ref={u => this._inputUsername = u}></input>
                        </Grid>
                        <Grid desktop="100">
                            <button type="submit">Login</button>
                        </Grid>
                    </form>
                </Grid>
            </GridContainer>
...

and the HTML rendered is this:

<div id="app-container">
   <div data-reactroot="" class="grid-container">
      <div class="grid-40"
         <form>
            <div class="grid-100">
               <label for="username">User name</label>
               <input type="text" id="username">
            </div>
            <div class="grid-100">
                <label for="username">Password</label>
                <input type="text" id="password">
           </div>
           <div class="grid-100">
                <button type="submit">Login</button>
           </div>
    </form>
</div>

Do I have to import something else from unsemantic module?

DracotMolver commented 6 years ago

There isn't any issue with this lol. I sort it out. The issue is with PurifyCSSPlugin module.