Question

使用（并固定使用）Webpack 3。

我的文件结构如下：

display=view

app.js

source/
  css/
    - style.scss
    - _partial1.scss
    - _partial2.scss
  js/
    - app.js
public/
  - dist/
  - index.html

style.scss

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

index.html

@import 'partial1'
@import 'partial2'

Webpack生产配置将所有构建的JS / CSS输出给公众，当我访问构建的站点时，我看到我的样式已应用并且脚本按预期工作，很好！

但是，当我在启用HMR的开发人员模式（webpack-dev-server）中运行时，我开始遇到问题。似乎HMR希望您将已编译的SASS加载到样式元素中，并且随着您的SASS更改，它将交换出该元素。这对我来说是个问题，因为我已经通过链接元素在页面上包含了内置的CSS。实质上是将构建的CSS两次放置在页面上：

通过链接元素包含的先前构建的CSS
样式标记中的新构建CSS

因此，如果在上一个产品构建之后没有进行任何更改，请启动开发服务器，则基本上可以清空整个style.scss文件，重新打包webpack-dev-server并热加载样式元素，而实际上没有任何变化（ styles元素现在为空，但先前的prod生成的文件仍处于链接状态）。页面看起来一样。

不是让webpack-dev-server创建一个style元素，而是它可以生成dist / style.css并热重载link元素吗？

使用HMR替换Webpack Dev Server中CSS /已编译SASS的链接元素

0 个答案: