[vuejs/vue-cli]vue-cli4 css热跟新失效

Version

4.5.0

Environment info

package.json

{
"name": "vue-temp-2021-3-8",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve && webpack-dev-server --open",
"build": "vue-cli-service build",
"build:test": "vue-cli-service build --mode test",
"build:production": "vue-cli-service build --mode production",
"build:analyzer": "vue-cli-service build --mode analyzer"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"webpack-bundle-analyzer": "^4.4.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"axios": "^0.21.1",
"babel-plugin-component": "^1.1.1",
"element-ui": "^2.15.1",
"mockjs": "^1.1.0",
"node-sass": "^4.12.0",
"nprogress": "^0.2.0",
"postcss-pxtorem": "^5.1.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"vuex-persistedstate": "^4.0.0-beta.3",
"webpack-dev-server": "^4.2.1"
}
}

vue.config.js

devServer: {
port: 8080,
host: "0.0.0.0",
https: false,
// 自动启动浏览器
open: false,
hot: true,
},

What is expected?

热更新成功

What is actually happening?

热更新样式css失效

zhoufanglu

没必要另外装 webpack-dev-server

sodatea

我去除了，css热跟新也没生效

zhoufanglu

请提供复现代码。

sodatea

我在组件内设置了颜色，需要刷新页面才能生效，而不能热跟新

<style lang="scss" scoped>
.home {
color: red;
//font-size: 30px;
}
</style>

zhoufanglu

请提供可以运行的复现代码。问题可能出在任何地方，包括项目依赖、网络环境等，仅靠代码片段无法判断是否为 Vue CLI 的 bug。

sodatea

这是我的demo ，你可以克隆下来帮忙看看

zhoufanglu

https://cli.vuejs.org/zh/config/#css-extract

提取 CSS 在开发环境模式下是默认不开启的，因为它和 CSS 热重载不兼容。

sodatea

谢谢大佬，搞了半天终于解决了 🥰🤞🤞

zhoufanglu

[vuejs/vue-cli]vue-cli4 css热跟新失效

回答

相关问题