Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/webpack/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs 为什么';我不能在Windows上使用我的网页配置吗?_Reactjs_Webpack_Webpack Style Loader - Fatal编程技术网

Reactjs 为什么';我不能在Windows上使用我的网页配置吗?

Reactjs 为什么';我不能在Windows上使用我的网页配置吗?,reactjs,webpack,webpack-style-loader,Reactjs,Webpack,Webpack Style Loader,我的网页包配置可以在MacOS中运行,但它在Windows上显示错误 webpack.config.js var path = require("path"); var webpack = require("webpack"); var FileSystem = require("fs"); var argv = require('yargs').argv; var ExtractTextPlugin = require('extract-text-webpack-plugin'); modu

我的网页包配置可以在MacOS中运行,但它在Windows上显示错误

webpack.config.js

var path = require("path");
var webpack = require("webpack");
var FileSystem = require("fs");
var argv = require('yargs').argv;
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    devtool: 'cheap-module-source-map',
    entry: {
      main: ['webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8090',path.resolve(__dirname, 'app','index.jsx')],
      vendor:['react', 'redux', 'amazeui-react','react-redux' ,'react-router']
    },
    output: {
        path: path.resolve(__dirname, 'dist','app'),
        publicPath: '/dist/app/',
        filename: 'bundle.[hash].js',
        chunkFilename: '[id].[hash].chunk.js',
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js'),
        new ExtractTextPlugin('[name]-[chunkhash].css', {allChunks: true}),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('dev')
            }
        }),
        new webpack.DefinePlugin({
            'process.env.db_env': JSON.stringify(argv['db_env'] ? argv['db_env'] + '' : 'dev'),
        }),
        function() {
            this.plugin("done", function(statsData) {
                var stats = statsData.toJson();
                var bundlejs,maincss;
                var mains = stats.assetsByChunkName.main;
                console.log(mains);
                for (var i = 0; i < mains.length; i++) {
                  if (/^(bundle).+(js)$/.test(mains[i])) {
                    bundlejs = mains[i]
                  }
                  if (/^(main).+(css)$/.test(mains[i])) {
                    maincss = mains[i]
                  }
                }
                if (!stats.errors.length) {
                    var htmlFileName = "index.html";
                    var html = FileSystem.readFileSync(path.join('./resources/temp', htmlFileName), "utf8");
                    var htmlOutput = html.replace('bundle.js', bundlejs).replace('main.css', maincss);
                    FileSystem.writeFileSync(path.join('./', htmlFileName), htmlOutput);
                }
            });
        }
    ],
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!sass?outputStyle=expanded&sourceMap')
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel', // 'babel-loader' is also a legal name to reference
                query: {
                    plugins: ['transform-runtime', 'add-module-exports', "transform-decorators-legacy"],
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.js$/,
                loaders: [ 'babel' ],
                exclude: /node_modules/,
                include: __dirname
            },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=8192' }
        ]
    },
    externals: {
        BMap:'BMap',
        BMapLib:'BMapLib'
    },
    resolve: {
        root:path.resolve(__dirname),
        modulesDirectories: [
            'app',
            'node_modules'
        ],
        extensions: ['', '.js', '.jsx','.scss','.css']
    },
    resolveLoader: {
        root:path.resolve(__dirname,"node_modules"),
    },
    devServer: {
        port: 8090,
        hot: true,
        host:"0.0.0.0",
        historyApiFallback: {
            index: 'index.html'
        }
    }

};
在MacOS上一切正常,但当我在Windows上运行它时,我得到一个错误:

 Module not found: Error: Cannot resolve module 'css' in somefile.
文件如下所示:

 const style = require('./BuildingDetailContainer.scss');
const path = require("path");
const srcPath = path.join(__dirname, 'src');
const sassLoaders = [
  "css-loader",
  "autoprefixer-loader?browsers=last 2 version",
  "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
];
我确信我已经安装了css加载器sass加载器样式加载器

这是我的
package.json
,我怀疑这是由该文件引起的。可能是因为我没有将加载程序添加到依赖项

{
  "name": "souban-website",
  "version": "1.0.0",
  "description": "souban website",
  "author": "souban team",
  "license": "UNLICENSED",
  "private": true,
  "engines": {
    "node": ">=5.0.0",
    "npm": "^3.0.0"
  },
  "scripts": {
    "clean": "rm -rf dist",
    "start": "npm run webpack-dev",
    "deploy": "npm run test && npm run clean && npm run compile",
    "webpack": "rm -rf dist && NODE_ENV=production webpack  --display-error-details --colors --progress -p --config webpack.prod.config.js",
    "webpack-dev": "webpack-dev-server --progress --colors --hot --inline",
    "webpack-release": "rm -rf dist && NODE_ENV=production webpack  --display-error-details --colors --progress -p --config webpack.rele.config.js --db_env production",
    "webpack-dev-release": "rm -rf dist && NODE_ENV=production webpack  --display-error-details --colors --progress -p --config webpack.rele.config.js --db_env dev"
  },
  "dependencies": {
    "amazeui-react": "^1.0.1",
    "babel-runtime": "^6.6.1",
    "color": "^0.11.3",
    "colormin": "^1.1.2",
    "css-loader": "^0.24.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "moment": "^2.12.0",
    "node-sass": "^3.8.0",
    "postcss-colormin": "^2.2.0",
    "react": "^0.14.7",
    "react-count-to": "^0.4.0",
    "react-dom": "^0.14.6",
    "react-motion": "^0.4.2",
    "react-redux": "^4.0.6",
    "react-router": "^2.4.0",
    "redux": "^3.0.6",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.12"
  },
  "devDependencies": {
    "autobind-decorator": "^1.3.3",
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-plugin-add-module-exports": "^0.1.4",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.5",
    "isomorphic-fetch": "^2.2.1",
    "jsx-loader": "^0.13.2",
    "lodash": "^4.3.0",
    "node-sass": "^3.6.0",
    "radium": "^0.16.6",
    "react-addons-css-transition-group": "^0.14.6",
    "react-cookie": "^0.4.3",
    "react-dom": "^0.14.5",
    "react-hot-loader": "^1.3.0",
    "react-modal": "^0.6.1",
    "react-motion": "^0.4.1",
    "redux-logger": "^2.3.1",
    "redux-persist": "^1.5.5",
    "redux-persist-crosstab": "^1.0.1",
    "redux-thunk": "^1.0.3",
    "sass-loader": "^3.2.0",
    "scroll-behavior": "^0.3.0",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0",
    "yargs": "^4.7.1"
  }
}

我确实在windows上工作,在windows上运行顺畅是一场噩梦,在mac上一切正常,但在windows上没有,因此如果这只是windows和Sass的错误,您可能必须手动将路径添加到Sass加载程序

Windows的诀窍在于:

  • 显示隐藏的文件和文件夹
  • 检查“user/appData”处的文件夹,路径应为:C:\Users\user\appData\Roaming\npm
  • 将环境变量添加到Windows:NODE_路径,并将其指向NodeModule C:\Users\user\AppData\Roaming\npm\NodeModule
  • 运行npm安装-g
  • 关闭并重新打开终端
我正在使用sass loader 3.0,在我的webpack.config中是这样的:

 const style = require('./BuildingDetailContainer.scss');
const path = require("path");
const srcPath = path.join(__dirname, 'src');
const sassLoaders = [
  "css-loader",
  "autoprefixer-loader?browsers=last 2 version",
  "sass-loader?indentedSyntax=sass&includePaths[]=" + path.resolve(__dirname, "./src"),
];
我的package.json中有用于加载的:

"autoprefixer-loader": "3.1.0" 
"sass-loader": "^3.0.0",
"style-loader": "0.12.4"
“我的解析”使用path.sep。在Windows中,就我重新录制而言,这是必需的:

 resolve: {
    extensions: ["", ".js", ".scss"],
    modulesDirectories: ["src", "node_modules"],
    root: [__dirname + path.sep + 'scripts'],
  }
作为提醒,对于我这样使用的加载程序,我注意到您的模块中没有sass加载程序:

 {test: /\.scss$/, loaders: ["style", "css", "sass"]},
 {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},