Why doesn't use my webpack config on Windows? - reactjs

Question

My webpack config can run in MacOS,but it is showing error on 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'
}
}
};
My directory structure is this:
+src
+app
+node_modules
+webpack.config.js
and everything is working fine on MacOS,but when I run it on Windows,I get an error:
Module not found: Error: Cannot resolve module 'css' in somefile.
The file just like this:
const style = require('./BuildingDetailContainer.scss');
and I'm sure that I have installed css-loader sass-loader style-loader
This is my package.json， I suspect it is caused by this file.Maybe because I don't add my loader to dependencies.
{
"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"
}
}

Answer 1

I do work on windows and it was a nightmare to make things running smooth on it, everything worked fine on mac but not on windows, so If this is only wrong with Windows and Sass you might have to add the path manually to the sass loader.
The trick on Windows is here:
Display hidden files and folders.
Check the folder at 'user/appData', path should be: C:\Users\user\AppData\Roaming\npm
Add the enviroment variable to the Windows: NODE_PATH and point it to the nodeModules C:\Users\user\AppData\Roaming\npm\nodeModules
Run npm install -g
Close and reopen the terminal.
I'm using the sass loader 3.0, and in my webpack.config it's like this:
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"),
];
I have the in my package.json for the loading:
"autoprefixer-loader": "3.1.0"
"sass-loader": "^3.0.0",
"style-loader": "0.12.4"
My resolve uses path.sep it is necessary in Windows as far as I reserached:
resolve: {
extensions: ["", ".js", ".scss"],
modulesDirectories: ["src", "node_modules"],
root: [__dirname + path.sep + 'scripts'],
}
As a heads up, for the loaders I use like this, and I noticed you don't have sass loaders in your modules:
{test: /\.scss$/, loaders: ["style", "css", "sass"]},
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},