const CracoLessPlugin = require("craco-less");
const StylelintPlugin = require('stylelint-webpack-plugin')
const path = require('path')
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
const { loaderByName }  = require('@craco/craco')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true
          }
        },
        modifyLessRule(lessRule, context) {
          lessRule.exclude = lessModuleRegex
          return lessRule
        },
        modifyLessModuleRule(lessModuleRule, context) {
          lessModuleRule.test = lessModuleRegex
          const cssLoader = lessModuleRule.use.find(loaderByName('css-loader'))
          cssLoader.options.modules = {
            localIdentName: '[local]_[hash:base64:5]'
          }
          return lessModuleRule
        }
      }
    },
  ],
  webpack: {
    modules: true,
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    plugins: [
      new StylelintPlugin({
        configFile: path.resolve(__dirname, '.stylelintrc.js'),  // 加载的配置文件
        // files: ['**/*.{css,less,scss}'],  // 要检查的扩展名
        files: ['src/**/*.{less,vue}'],
        lintDirtyModulesOnly: true,  // 仅检查有变化的文件
        fix: true,  // 自动修复
        cache: false, // 是否缓存
        emitWarning: true, // 开发运行时抛出 warning 提示
        emitErrors: false,  // 开发运行时抛出 error 提示
      }),
    ],
  },
  babel: {
    // plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
  },
  devServer: (devServerConfig, {env, paths, proxy, allowedHost}) => {
    return devServerConfig
  }
};