Chrome 没有将我浏览器中的更改传送到我的本地文件

Question

问题：

我在 chrome 开发工具中编辑 CSS 时，正在尝试使用 chrome 工作区/源地图来更新我的 sass 部分。 Chrome 正在从我在 webpack 中设置的源映射中检测我的 sass 部分，但是当我尝试从 chrome dev 中的源选项卡保存更改时给我错误 "Changes to this file were not saved to the file system."工具。

此外，在 chrome 开发工具的样式选项卡中，尽管 chrome 知道哪些属性连接到哪些 sass 部分，但更改样式不会更新部分源选项卡中的文件。

Chrome 没有将我浏览器中的更改传达给我的本地文件，尽管 sass 部分显示为 chrome 开发工具中映射的源，尽管我设置了工作站。

到目前为止：

我在 chrome 中设置了一个工作区并添加了项目的文件夹
禁用了我所有的 chrome 扩展程序
确保 'enable css source maps' 在 chrome 设置中是正确的

我认为问题可能出在我的 webpack 配置上，因为这是我第一次制作自定义 webpack 配置，我基本上是在摆弄它直到它起作用。它可能（可能不是）是依赖项的问题，因此我还将添加我的 package.json 文件。

Sass 在 chrome 检查器中检测到部分

Sass 部分显示在源选项卡中：

错误信息

Webpack 配置文件：

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: ['@babel/polyfill', './src/index.js'],
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        contentBase: 'dist',
        historyApiFallback: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/public/index.html'
        }),

        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [
            {
                test: /\.sass$/,
                use: [
                    "style-loader",
                    { loader: 'css-loader', options: { sourceMap: true} },
                    { loader: 'sass-loader', options: { sourceMap: true } }
                ],
            },

            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    "babel-loader"
                ]
            }
        ]
    }
}

Package.json:

{
  "name": "css",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/preset-env": "^7.6.3",
    "@babel/preset-react": "^7.6.3",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "eslint": "^6.5.1",
    "eslint-plugin-react": "^7.16.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.1",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  },
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-router-dom": "^5.1.2"
  },
  "eslintConfig": {
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "env": {
      "browser": true,
      "node": true
    }
  },
  "eslintIgnore": [
    "webpack.config.js"
  ]
}

Answer 1

这在 Chrome 中不再受支持 :( 相关问题标记为 "won't fix"。

https://bugs.chromium.org/p/chromium/issues/detail?id=996226

Chrome 没有将我浏览器中的更改传送到我的本地文件

Chrome is not communicating changes in my browser to my local files

css

google-chrome

sass

google-chrome-devtools

webpack