Question

问题：

当我在chrome开发工具中编辑CSS时，我尝试使用chrome工作区/源映射来更新我的sass部分。 Chrome浏览器从我在Webpack中设置的源映射中检测到我的sass局部片段，但出现错误“对该文件的更改未保存到文件系统中”。当我尝试从chrome开发工具中的“来源”标签保存更改时。

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

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

到目前为止：

我在chrome中设置了一个工作区，并添加了该项目的文件夹
禁用我所有的Chrome扩展程序
确保Chrome设置中的“启用CSS源地图”为真

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

在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不再支持此功能：（相关问题被标记为“无法解决”。

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

Chrome无法将浏览器中的更改传达给本地文件

1 个答案: