类名没有出现在React中

Question

Not Sure where am i going wrong.This is my webpack.prod for bundling client-side. but some how classNames are not appearing in my html

const path = require('path');
const webpack = require('webpack');
const dependencies = require('./package.json');
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const VENDOR_LIBS = [];
Object.entries(dependencies.dependencies).forEach(([key, value]) => {
  VENDOR_LIBS.push(key);
});

const BrowserConfig = {
  entry: {
    bundle: './src/index',
    vendor: VENDOR_LIBS,
  },
  output: {
    path: path.resolve('./dist'),
    publicPath: '/',
    filename: '[name].js',
    pathinfo: true,
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
  },
  module: {
    rules: [
      {
        use: ['react-hot-loader/webpack', 'babel-loader'],
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
      },
      {
        test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
        use: 'file-loader?limit=1024&name=fonts/[name].[ext]',
      },
      {
        test: /\.(gif|jpe?g|png|ico)$/,
        loader: ['file-loader?name=images/[name].[ext]&limit=100000'],
      },
      {
        test: /\.(scss|css)$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader',
              options: {
                sourceMap: true,
                camelCase: true,
                minimize: true,
                namedExport: true,
                modules: true,
                importLoaders: 2,
                localIdentName: '[hash:base64:5]',
              },
            },
            { loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: () => ([
                  require('autoprefixer')({
                    browsers: ['last 2 versions', 'ie >= 9'],
                  }),
                ]),
              },
            },
            // { loader: 'sass-loader', options: { sourceMap: true } },
          ],
        }),
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor'],
    }),
    new CleanWebpackPlugin(['dist']),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      },
      BROWSER: true,
      DEBUG: false,
      __DEVTOOLS__: false,
    }),
    new ManifestPlugin({
      fileName: './manifest.json',
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
  ],
  devServer: {
    contentBase: './dist',
    hot: true,
    historyApiFallback: true,
  },
  devtool: 'source-map',
};

module.exports = BrowserConfig;

This is header.js file where in, i have imported styles from header.scss file.

import React, { Component } from 'react';
import styles from './header.scss';

    class Header extends Component {
      render() {
        return (
          <div className={ styles.headerContainer }>This is Header</div>
        );
      }
    }

    export default Header;

header.scss file consists of the following code:

.headerContainer{
  border: 1px solid #ddd;
}

This is screenshot of my console where in classes are not appearing. enter image description here

i have included the following dependencies in my package.json

{
  "name": "wander",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV='development' webpack --config='webpack.server.js' && node dist/serverdist.js",
    "build": "NODE_ENV='production' webpack -p --config='webpack.prod' && NODE_ENV='production' webpack -p --config='webpack.server' && node dist/serverdist.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "history": "^4.7.2",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-css-modules-transform": "^1.2.7",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "clean-webpack-plugin": "^0.1.17",
    "compression-webpack-plugin": "^1.0.1",
    "css-loader": "^0.28.7",
    "eslint": "^4.8.0",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "express": "^4.16.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.0.6",
    "react-hot-loader": "^3.0.0-beta.7",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "url-loader": "^0.5.9",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-manifest-plugin": "^1.3.2",
    "webpack-node-externals": "^1.6.0"
  }
}

on serverside i have code like this;

app.use(express.static('dist'));

app.get('*', (req, res) => {
  if (process.env.NODE_ENV === 'production') {
    res.send(`
      <!DOCTYPE html>
      <head>
        <title>Wander Blog</title>
        <link rel="stylesheet" type="text/css" href="/bundle.css">
      </head>
      <body>
        <div id='app'>${renderToString(<App />)}</div>
        <script type="text/javascript" src="/vendor.js" defer></script>
        <script type="text/javascript" src="/bundle.js" defer></script>
      </body>
    </html>
  `);
  }
});

Answer 1

You're mixing up the concept of inline styles and CSS.

<div className={ styles.headerContainer }>This is Header</div>

Defined the className as the name in your scss file.

<div className='headerContainer'>This is Header</div>

If you want to use inline styles in the future, you should be making an object of inline styles and using the style prop.

<div style={styles.headerContainer}>This is Header</div>

But again, I have to emphasize that CSS and inline styles are not the same.

Answer 2

Loading CSS directly into component's class name is only doable using style-loader , which you only use as a fallback to extract-text-plugin .

You have to add style-loader to your list of loaders as well. Like this:

use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'style-loader',
            { loader: 'css-loader',
              options: {
                sourceMap: true,
                camelCase: true,
                minimize: true,
                namedExport: true,
                modules: true,
                importLoaders: 2,
                localIdentName: '[hash:base64:5]',
              },
            },
            { loader: 'postcss-loader',
              options: {
                sourceMap: true,
                plugins: () => ([
                  require('autoprefixer')({
                    browsers: ['last 2 versions', 'ie >= 9'],
                  }),
                ]),
              },
            },
            { loader: 'sass-loader', options: { sourceMap: true } },
          ],
        }),
      },
    ],
  },

Also, if your'e using sass, you should also use sass-loader.

Answer 3

只需在header.js文件中使用className="headerContainer" 。