Closed DracotMolver closed 6 years ago
Im using React and Webpack. The rendered HTML is displayed well, but there isn't any css styles like .grid-container.
.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?
There isn't any issue with this lol. I sort it out. The issue is with PurifyCSSPlugin module.
PurifyCSSPlugin
Im using React and Webpack. The rendered HTML is displayed well, but there isn't any css styles like
.grid-container
.My webpack config:
and my React file
and the HTML rendered is this:
Do I have to import something else from unsemantic module?