修改JSON文件时，如何使用webpack-dev-server和sass-loader编译Sass？

修改JSON文件时，使用webpack-dev-server和sass-loader编译Sass的步骤如下：

1. 首先，在项目根目录下安装webpack和webpack-dev-server依赖：

npm install webpack webpack-dev-server --save-dev

1. 在项目根目录下创建一个webpack配置文件webpack.config.js，并添加以下配置：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8000
  }
};

在上面的配置中，我们使用了'sass-loader'来编译Sass文件，并使用'style-loader'和'css-loader'将编译后的CSS添加到页面中。

1. 安装sass-loader和json-loader依赖：

npm install sass-loader node-sass json-loader --save-dev

1. 在项目根目录下创建一个src文件夹，并在其中创建index.js和styles.scss文件。在index.js文件中，引入styles.scss文件：

import './styles.scss';

1. 在styles.scss文件中，编写你的Sass代码。
2. 在package.json文件中，添加一个启动命令，以便使用webpack-dev-server运行开发服务器：

"scripts": {
  "start": "webpack-dev-server --open"
}

1. 运行命令启动开发服务器：

npm start

现在，当你修改JSON文件或Sass文件时，webpack-dev-server会自动重新编译并刷新浏览器，以显示更新后的内容。

总结一下，使用webpack-dev-server和sass-loader编译Sass的关键步骤包括：安装依赖、配置webpack、创建Sass文件、编写Sass代码、运行开发服务器。这样可以实现在开发过程中实时编译和预览Sass样式的效果。

腾讯云提供的相关产品和介绍链接：

• 云服务器CVM：提供弹性云服务器，用于托管和运行你的应用程序。
• 云开发CLB：提供高可用、高可扩展的负载均衡服务，用于将流量分发到多个服务器上。
• 云存储COS：提供高可用、高可靠、可扩展的对象存储服务，用于存储和访问大规模的非结构化数据。
• 腾讯云物联网平台：提供物联网设备接入、管理和数据处理等服务，帮助构建物联网应用。
• 人工智能平台AI Lab：提供丰富的人工智能服务和工具，包括图像识别、语音识别、机器学习等。
• 区块链服务：提供可信、高效的区块链云服务，帮助实现去中心化应用的开发和部署。

请注意，以上腾讯云产品链接仅作为参考，具体选择和使用需根据实际需求进行评估和决策。