const path = require('path')
const name = '壹车优品系统'

function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  
  chainWebpack: config => {
    // config.module
    //   .rule('css')
    //   .test(/\.css$/)
    //   .oneOf('vue')
    //   .resourceQuery(/\?vue/)
    //   .use('px2rem')
    //   .loader('px2rem-loader')
    //   .options({
    //     remUnit: 75
    //   })
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    devtool: 'source-map',
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  css: {
    loaderOptions: {
      // postcss: {
      //   plugins: [
      //     require('postcss-plugin-px2rem')({
      //       rootValue: 75, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      //       // unitPrecision: 5, //允许REM单位增长到的十进制数字。
      //       //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
      //       // propBlackList: [], //黑名单
      //       // exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      //       // selectorBlackList: [], //要忽略并保留为px的选择器
      //       // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
      //       // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
      //       mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
      //       minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0
      //     }),
      //   ]
      // },
      less: {
        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
        // lessOptions: {
        modifyVars: {
          // 直接覆盖变量
          'text-color': '#111',
          'border-color': '#eee',
          'field-placeholder-text-color': 'rgba(153, 153, 153, 1)',
          'toast-font-size': '24px',
          'toast-text-padding': '20px;',
          'cascader-tabs-height': '60px',
          'cascader-header-height': '60px',
          'cascader-title-font-size': '44px',
          'collapse-item-content-font-size': '24px',
          'progress-pivot-font-size': '10px',
          'progress-pivot-line-height': 1
          // 或者可以通过 less 文件覆盖（文件路径为绝对路径）
          // hack: `true; @import "your-less-file-path.less";`,
        },
        // },
      },
    }
  }
}