Question

我在我的项目中使用webpack，目前我正在尝试设置 sass hot reloading

当我运行 webpack-dev-server --inline --hot 时，我的main.scss（其中导入了所有其他css / scss）已加载，一切都很好，但是一旦我运行修改一些东西，它不刷新，我必须重新启动webpack服务器

这是我的webpack.config.js

module.exports = {
  entry: JS_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './src/client',
    inline: true,
    hot: true,
    port: 8080
  },
  module: {
    loaders: [{
      test: /\.jsx?/,
      include: JS_DIR,
      loader: 'babel',
    }, {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    }]
  },
  resolve: {
    root: path.resolve(CLIENT_DIR),
    extensions: ['', '.js', '.jsx']
  },
  postcss: function() {
    return [autoprefixer, precss];
  }
};

index.jsx

import style from 'css/main.scss';
...

main.scss

@import './style.scss';

style.scss

h1 {
  color: yellow;
}

感谢您的帮助

Answer 1

好的，我解决了这个问题

webpack.config.js 现在看起来像这样：

module.exports = {
  entry: JS_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './src/client',
    inline: true,
    hot: true,
    port: 8080
  },
  module: {
    loaders: [{
      test: /\.jsx?/,
      include: JS_DIR,
      loader: 'babel',
    }, {
      test: /\.scss$/,
      loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
    }]
  },
  resolve: {
    root: path.resolve(CLIENT_DIR),
    extensions: ['', '.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

它运行正常 npm start （脚本位于package.json中）

...
"scripts": {
  "start": "webpack-dev-server"
},
...

看起来'postcss-loader'是问题的根源，如果我将其添加到加载器中，它将停止工作

Sass在webpack项目中没有热重新加载

1 个答案: