我目前正在尝试在React / Redux Asp.Net Web项目中使用css加载器。我开始按照这个例子为项目https://blog.pusher.com/how-to-use-react-with-visual-studio-and-asp-net-web-api/创建一个shell。我已升级到webpack 3.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);
css文件只是我为测试创建的空文件。我已经尝试了https://webpack.js.org/concepts/loaders/#using-loaders中提到的所有三个加载选项而且我一直有这个错误“!! ../../ node_modules / css-loader / index.js！./ main.css”
以下是此错误的bundle.js中输出的示例
function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module \"!!../../node_modules/css-loader/index.js!./main.css\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(588)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../../node_modules/css-loader/index.js!./main.css", function() {
var newContent = require("!!../../node_modules/css-loader/index.js!./main.css");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
我目前在带有Service Pack 1的Windows 7计算机上运行Node版本9.4.0。我也在视觉工作室2015中运行这个项目。我假设这是一个简单修复的问题，但我还没有找到一个，我已经花了几天研究这个。
我设法通过对webpack配置进行一些更新来解决这个问题
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"
}
]
}//,
//{
// test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
// use: [
// {
// loader: "url?limit=10000&mimetype=image/svg+xml"
// }
// ]
//}
]
}
}
答案 0 :(得分：0)
所以我确实设法在坐下几个小时并一次修复一个错误后解决了这个问题。首先我没注意到的是，当我将webpack切换到3.10.0时，我的包没有更新。我在那里有一些在新版本中不起作用的属性。从那里我吹走了我的所有节点模块并重新安装它们以确保所有依赖项都是正确的，然后我更新了我的webpack配置我现在可以将样式作为模块导入并引用样式对象中的样式。
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"
}
]
}
]
}
}
这个版本看起来可以正常工作，应该添加resolve-url-loader，它不包含在我之前的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",
"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 loader中，但这对我来说仍然没有用。 以下是变通方法的示例
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;