Javascript 网页包css加载程序问题！！！！//node_modules/css loader/index.js/main.css“；

我目前正在尝试在React/Redux Asp.Net Web项目中使用css加载程序。我开始按照这个例子为一个项目创建一个shell。我已经升级到Webpack3.0。这是我的webpack.config.js

var path = require("path");
var webpack = require("webpack");

    module.exports = {
        debug: true,
        devtool: "eval-source-map",
        entry: {
            bundle: path.join(__dirname, "src/index"),
            tests: path.join(__dirname, "src/tests/all.tests.js"),
            vendor: [
                "jquery",
                "expect"
            ]
        },
        output: {
            path: path.join(__dirname, "src"),
            publicPath: "/",
            filename: "[name].js"
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery"
            })
        ],
        module: {
            rules: [
                {
                    test: /\.js$/,
                    use: "babel-loader",
                    exclude: /node_modules/,
                    query: {
                        presets: ["es2015", "react"]
                    }
                },
                {
                    test: /\.css$/,                
                    use: ["style-loader", "css-loader"]
                },
                { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: "file" },
                { test: /\.(woff|woff2)$/, use: "url?prefix=font/&limit=5000" },
                { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: "url?limit=10000&mimetype=application/octet-stream" },
                { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: "url?limit=10000&mimetype=image/svg+xml" }
            ]
        }
    }

这是我的package.json

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "babel": "6.5.2",
    "babel-cli": "6.8.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "^2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "0.8.5",
    "jsdom": "8.5.0",
    "mocha": "^2.5.3",
    "mocha-webpack": "^1.0.1",
    "nock": "8.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "post-loader": "^2.0.0",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "dependencies": {
    "axios": "0.13.1",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "jquery": "2.2.3",
    "node-sass": "^4.7.2",
    "react": "15.0.2",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "resolve-url-loader": "^2.2.1",
    "toastr": "2.1.2",
    "ts-loader": "^3.4.0"
  }
}

这是我制作的一个样品组件

import React, {PropTypes} from "react";
import {Link} from "react-router";
import {connect} from "react-redux";
import * as customerActions from "../../actions/customerAction";
import "../../styles/main.css";

class CustomerPage extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            customers: []
        };
    }

    render() {
        return (
            <div>
                <h1>Hello World.</h1>
           </div>
        );
    }
}

CustomerPage.propTypes = {
    dispatch: PropTypes.func.isRequired,
    customers: PropTypes.array.isRequired
}

function mapStateToProps(state, ownProps) {
    return {
        customers: state.customers
    };
}

export default connect(mapStateToProps)(CustomerPage);

---

因此，在坐了几个小时，一次解决一个错误之后，我成功地解决了这个问题。首先，我没有注意到的是，当我将webpack切换到3.10.0时，我的包没有更新。我有一些新版本中无法使用的属性。从那里我吹走了我所有的节点模块并重新安装它们，以确保所有的依赖关系都是正确的，然后我更新了我的网页配置，现在我可以将样式作为模块导入，并引用样式对象中的样式

var path = require("path");
var webpack = require("webpack");

module.exports = {
    entry: {
        bundle: path.join(__dirname, "./src/index"),
        tests: path.join(__dirname, "src/tests/all.tests.js"),
        vendor: [
            "jquery",
            "expect"
        ]
    },
    resolveLoader: {
        moduleExtensions: ["-loader"]
    },
    output: {
        path: path.join(__dirname, "src"),
        publicPath: "/",
        filename: "[name].js"
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nb/),
        new webpack.LoaderOptionsPlugin({
            test: /\.css$/,
            debug: true,
            options: {
                context: path.join(__dirname, "src"),
                output: { path: path.join(__dirname, "dist") }
            }
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["es2015", "react"]
                    }
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: [
                    { loader: "file-loader?hash=sha512&digest=hex&name=assets/[hash].[ext]" },
                    { loader: "image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false" }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader?modules&camelCase",
                        options: {
                            modules: true
                        }
                    },
                    { loader: "resolve-url-loader" }
                ]
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                         loader: "file-loader"
                    }]
            },
            {
                test: /\.(woff|woff2)$/,
                use: [
                    {
                         loader: "url?prefix=font/&limit=5000"
                    }
                ]
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                         loader: "url?limit=10000&mimetype=application/octet-stream"
                    }
                ]
            }
        ]
    }
}

这个构建似乎可以正常工作，应该添加解析url加载程序，这在我以前的包中没有包含。json示例：下面是所有版本的更新

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "babel": "6.5.2",
    "babel-cli": "6.8.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "^2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "0.8.5",
    "jsdom": "8.5.0",
    "mocha": "^2.5.3",
    "mocha-webpack": "^1.0.1",
    "nock": "8.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "post-loader": "^2.0.0",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "dependencies": {
    "axios": "0.13.1",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "image-webpack-loader": "^4.0.0",
    "jquery": "2.2.3",
    "react": "15.0.2",
    "react-css-modules": "^4.7.1",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "resolve-url-loader": "^2.2.1",
    "toastr": "2.1.2",
    "ts-loader": "^3.4.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js --display-error-details",
    "lint": "eslint src/tests/** src/index.js",
    "start": "npm-run-all --parallel lint"
  }
}

此外，当导入样式时，比如“从./styles/style.css导入样式”，如果样式不是驼峰式大小写，则css加载程序会出现问题。您可以将camelCase选项添加到css加载程序中，但这对我来说仍然不起作用。 下面是一个变通方法的示例

import React, {PropTypes} from "react";
import {Link, IndexLink} from "react-router";
import styles from "../../styles/style.css";


const Header = () => {
    return (
        <nav className={styles["c-sub-nav"]}>
            <a href="" className={styles["c-sub-nav__item"]}>Dashboard</a>
            <a href="" className={styles["c-sub-nav__item"]}>Customers</a>                
            <a href="" className={styles["c-sub-nav__item"]}>Reports</a>
        </nav>
    );
};

export default Header;

import React，{PropTypes}来自“React”；
从“反应路由器”导入{Link，IndexLink}；
从“../../style/style.css”导入样式；
常量头=（）=>{
返回(
);
};
导出默认标题；

{
  "version": "1.0.0",
  "name": "ASP.NET",
  "private": true,
  "devDependencies": {
    "babel": "6.5.2",
    "babel-cli": "6.8.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-react-display-name": "2.0.0",
    "babel-preset-es2015": "6.9.0",
    "babel-preset-react": "6.11.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-register": "6.8.0",
    "colors": "1.1.2",
    "compression": "1.6.1",
    "cross-env": "1.0.7",
    "css-loader": "0.23.1",
    "enzyme": "2.2.0",
    "eslint": "^2.9.0",
    "eslint-plugin-import": "1.6.1",
    "eslint-plugin-react": "5.0.1",
    "eslint-watch": "2.1.11",
    "eventsource-polyfill": "0.9.6",
    "expect": "1.19.0",
    "express": "^4.13.4",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "0.8.5",
    "jsdom": "8.5.0",
    "mocha": "^2.5.3",
    "mocha-webpack": "^1.0.1",
    "nock": "8.0.0",
    "npm-run-all": "1.8.0",
    "open": "0.0.5",
    "post-loader": "^2.0.0",
    "react-addons-test-utils": "15.0.2",
    "redux-immutable-state-invariant": "1.2.3",
    "redux-mock-store": "1.0.2",
    "rimraf": "2.5.2",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
    "webpack": "^3.10.0",
    "webpack-dev-middleware": "1.6.1",
    "webpack-hot-middleware": "2.10.0"
  },
  "dependencies": {
    "axios": "0.13.1",
    "babel-plugin-webpack-loaders": "^0.9.0",
    "babel-polyfill": "6.8.0",
    "bootstrap": "3.3.6",
    "image-webpack-loader": "^4.0.0",
    "jquery": "2.2.3",
    "react": "15.0.2",
    "react-css-modules": "^4.7.1",
    "react-dom": "15.0.2",
    "react-redux": "4.4.5",
    "react-router": "2.4.0",
    "react-router-redux": "4.0.4",
    "redux": "3.5.2",
    "redux-thunk": "2.0.1",
    "resolve-url-loader": "^2.2.1",
    "toastr": "2.1.2",
    "ts-loader": "^3.4.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js --display-error-details",
    "lint": "eslint src/tests/** src/index.js",
    "start": "npm-run-all --parallel lint"
  }
}

import React, {PropTypes} from "react";
import {Link, IndexLink} from "react-router";
import styles from "../../styles/style.css";


const Header = () => {
    return (
        <nav className={styles["c-sub-nav"]}>
            <a href="" className={styles["c-sub-nav__item"]}>Dashboard</a>
            <a href="" className={styles["c-sub-nav__item"]}>Customers</a>                
            <a href="" className={styles["c-sub-nav__item"]}>Reports</a>
        </nav>
    );
};

export default Header;