0

我正在尝试在 webpack 中使用 css 模块，但它不起作用。

我的 webpack 是：

var path = require('path')
var webpack = require('webpack')
var HappyPack = require('happypack')
var BundleTracker = require('webpack-bundle-tracker')
var path = require('path')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

function _path(p) {
  return path.join(__dirname, p);
}

module.exports = {

    context: __dirname,
    entry: [
        './assets/js/index'
    ], 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name].js'
    },

    devtool: 'inline-eval-cheap-source-map',

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: ["babel-loader"]
        }),
        new ExtractTextPlugin("[name].css")

    ],

    module: {
        loaders: [

             {
                test: /\.css$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!resolve-url-loader")
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!resolve-url-loader!sass-loader")

            },

            {
                test: /\.jsx?$/, 
                include: path.resolve(__dirname, './assets/js/'),
                exclude: /node_modules/, 
                loaders: ["happypack/loader?id=jsx"]
            },
            {
                test: /\.png$/,
                loader: 'file-loader',
                query: {
                    name: '/static/img/[name].[ext]'
                }
            }
        ]
    },

    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx'],
        alias: {
          'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'),
        }, 
    }   
}

我正在使用 ExtractTextPlugin，我只是添加了参数：

?modules=true&localIdentName=[name]__[local]___[hash:base64:5]

在 css 和 scss 加载程序中。

我的反应组件是：

'use strict'

import React from 'react'
import styles from '../../../css/test.css'

class User extends React.Component{
    constructor(props){
        super(props)
    }



    render() {
        return (
            <nav className={styles.test}>

            </nav>
        );
    }
}

export default User

我的 test.css 是：

.test {
    width:100%;
    float: left;
    background: blue;
    height: 50px;
    position: relative;
}

但它<nav></nav>没有类渲染。

谁能帮我？

4

0 回答 0