webstorm配置scss、typescript等自动编译方式

在WebStorm中配置SCSS和TypeScript自动编译的方法如下：

1. 确保你已经安装了node-sass和ts-loader依赖。如果没有安装，可以通过npm或yarn进行安装：

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

或者

yarn add node-sass --dev
yarn add ts-loader --dev

2. 在WebStorm中配置文件监听器：

   • 打开WebStorm设置或者首选项（Preferences）。
   • 进入“Languages & Frameworks”（语言和框架）> “File Watchers”（文件监听器）。
   • 点击右侧的“+”号，选择所需的文件类型（例如：SCSS）。
   • 配置文件监听器的设置，确保输出路径正确。

3. 配置webpack（如果你使用的是webpack）：

   • 在webpack配置文件中（如：webpack.config.js），添加对应的loader配置。

SCSS自动编译配置示例：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
  // ...
};

TypeScript自动编译配置示例：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.tsx?$/,
        use: [
          'ts-loader',
          // 其他loader配置
        ],
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
  // ...
};

确保你的WebStorm设置中已经启用了“Auto-save files on frame activation”（在激活框架时自动保存文件），这样在切换应用时会自动编译文件。