如火热链接到css,用于在Webpack中启用热式样装入器以同步css的配置

我试图在Webpack中启用热样式装入器，但是我找不到正确的配置。这里是我的webpack.config.js：用于在Webpack中启用热式样装入器以同步css的配置

const webpack = require(‘webpack’);

const path = require(‘path’);

const buildPath = path.resolve(__dirname, ‘build’);

const nodeModulesPath = path.resolve(__dirname, ‘node_modules’);

const TransferWebpackPlugin = require(‘transfer-webpack-plugin’);

const config = {

entry: [

‘webpack/hot/dev-server’,

‘webpack/hot/only-dev-server’,

path.join(__dirname, ‘/src/app/app.js’),

],

resolve: {

extensions: [“”, “.js”],

},

devServer: {

contentBase: ‘src/www’,

devtool: ‘eval’,

hot: true,

inline: true,

port: 3232,

host: ‘0.0.0.0’,

},

devtool: ‘eval’,

output: {

path: buildPath,

filename: ‘app.js’,

},

plugins: [

new webpack.HotModuleReplacementPlugin(),

new TransferWebpackPlugin(

[{ from: ‘www’ }],

path.resolve(__dirname, “src”)

),

],

module: {

loaders: [

{

test: /\.js$/,

loaders: [‘react-hot’, ‘babel-loader’],

exclude: [nodeModulesPath],

},

{

test: /\.css$/,

loader: “style!css”,

},

],

},

eslint: {

configFile: ‘.eslintrc’,

},

};

module.exports = config;

而且我package.js文件：

{

“name”: “test-material-ui”,

“version”: “0.0.0-beta.1”,

“description”: “Sample project that uses material-ui”,

“scripts”: {

“start”: “webpack-dev-server –config webpack.config.js –progress –inline –colors”,

“build”: “webpack -p –define process.env.NODE_ENV=’\”production\”‘ –config webpack-production.config.js –progress –colors”,

“lint”: “eslint src && echo \”eslint: no lint errors\””

},

“private”: true,

“devDependencies”: {

“babel-core”: “^6.3.26”,

“babel-eslint”: “^6.0.0”,

“babel-loader”: “^6.2.4”,

“babel-preset-es2015”: “^6.3.13”,

“babel-preset-react”: “^6.3.13”,

“copy-webpack-plugin”: “^2.1.3”,

“css-loader”: “^0.23.1”,

“eslint”: “^2.5.1”,

“eslint-plugin-react”: “^4.0.0”,

“html-webpack-plugin”: “^2.7.2”,

“react-hot-loader”: “^1.3.0”,

“style-loader”: “^0.13.1”,

“transfer-webpack-plugin”: “^0.1.4”,

“webpack”: “^1.12.9”,

“webpack-dev-server”: “^1.14.0”

},

“dependencies”: {

“flexboxgrid”: “^6.3.0”,

“material-ui”: “^0.15.0-beta.1”,

“react”: “^15.0.1”,

“react-addons-css-transition-group”: “^15.0.1”,

“react-dom”: “^15.0.1”,

“react-redux”: “^4.4.5”,

“react-tap-event-plugin”: “^1.0.0”,

“redux”: “^3.4.0”

}

}

但无论我如何配置它，我不能让热同步工作(为的CSS，对于.js文件它工作得很好)！有人能告诉我正确的方法吗？

2016-05-06

Mehran

+1

只是为了排除这种可能性;你知道你必须要求JavaScript中的CSS？ –

+0

@hansn你真棒，非常感谢你。 –

+0

如果您以帖子的形式发帖，我很乐意将其标记为答案。 –