const path = require("path");
module.exports = {
  configureWebpack: {
    devtool: "source-map",
    resolve: {
      alias: {
        "@": path.resolve("./src"),
      },
    },
  },
  devServer: {
    disableHostCheck: true,
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          // 补全css前缀(解决兼容性)
          require("autoprefixer")(),
          // 把px单位换算成rem单位
          require("postcss-pxtorem")({
            rootValue: 75, // 换算的基数(设计图750的根字体为75,)
            propList: ["*"],
          }),
        ],
      },
    },
  },
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("scss").oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use("sass-resources-loader")
        .loader("sass-resources-loader")
        .options({
          // 全局变量资源路径
          resources: "./src/assets/scss/theme.scss",
          // 也可以选择全局变量路径数组, 如果你有多个文件需要成为全局,就可以采用这种方法
          // resources: ['./path/to/vars.scss', './path/to/mixins.scss']
          // 或者你可以将多个scss文件@import到一个main.scss用第一种方法，都是可以的
        })
        .end();
    });
  },
};