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

问题描述

问题：

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

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

尽管 sass 部分显示为 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"
                ]
            }
        ]
    }
}

包.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"
  ]
}

标签： cssgoogle-chromewebpacksassgoogle-chrome-devtools

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

问题描述

解决方案

推荐阅读