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

Question

问题:

当我在 Chrome 开发工具中编辑 CSS 时，我正在尝试使用 Chrome 工作区/源 map 来更新我的 Sass 部分。 Chrome 正在从我在 webpack 中设置的源映射中检测我的 sass 部分，但给我错误“对此文件的更改未保存到文件系统。”当我尝试在 Chrome 开发工具的源选项卡中保存更改时。

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

尽管 sass partials 在 chrome 开发工具中显示为源映射，并且尽管我设置了工作站，但 Chrome 并未将我浏览器中的更改传达给我的本地文件。

到目前为止:

• 我在 chrome 中设置了一个工作区并添加了该元素的文件夹
• 禁用了我所有的 chrome 扩展程序
• 确保“启用 css 源映射”在 Chrome 设置中为真

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

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

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 中不再受支持 :( 相关问题被标记为“不会修复”。

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