在scss中使用env变量

1. 在vue项目中新建.env文件,设置变量

2. 在vue.config.js中配置如下

完整配置

// eslint-disable-next-line import/no-extraneous-dependencies
const path = require('path')
const autoprefixer = require('autoprefixer')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const CompressUploadPlugin = require('vue-compress-upload-plugin')
// 引入等比适配插件
const pxtovw = require('postcss-px-to-viewport')
const pxtovh = require('postcss-px-to-viewport')
const buildConfig = require('./config/index')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  outputDir: 'dist',
  publicPath: './',
  productionSourceMap: process.env.NODE_ENV !== 'production',
  lintOnSave: true,
  devServer: {
    /* 自动打开浏览器 */
    open: false,
    disableHostCheck: true,
    hot: true, // 热更新
    liveReload: true, // 文件变化后会刷新页面
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host: '0.0.0.0',
    port: 8081,
    overlay: {
      warnings: true,
      errors: false
    },
    /* 使用代理 */
    proxy: {
      
    }
  },
  css: {
    sourceMap: true,
    extract: process.env.NODE_ENV === 'production' ? {
      ignoreOrder: true
    } : false,
    loaderOptions: {
      postcss: {
        plugins: [
          pxtovw({
            unitToConvert: 'px', // 需要转换的单位，默认为"px"；
            viewportWidth: process.env.VUE_APP_VIEW_WIDTH, // 设计稿的视口宽度
            unitPrecision: 5, // 单位转换后保留的小数位数
            propList: ['*'], // 要进行转换的属性列表,*表示匹配所有,!表示不转换
            viewportUnit: 'vw', // 转换后的视口单位
            fontViewportUnit: 'vw', // 转换后字体使用的视口单位
            selectorBlackList: [], // 不进行转换的css选择器，继续使用原有单位
            minPixelValue: 1, // 设置最小的转换数值
            mediaQuery: false, // 设置媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules/] // 忽略某些文件夹下的文件
          }),
          pxtovh({
            unitToConvert: 'ph', // 需要转换的单位，默认为"ph"；
            viewportWidth: process.env.VUE_APP_VIEW_HEIGHT, // 设计稿的视口高度
            unitPrecision: 5, // 单位转换后保留的小数位数
            propList: ['*'], // 要进行转换的属性列表,*表示匹配所有,!表示不转换
            viewportUnit: 'vh', // 转换后的视口单位
            fontViewportUnit: 'vh', // 转换后字体使用的视口单位
            selectorBlackList: [], // 不进行转换的css选择器，继续使用原有单位
            minPixelValue: 1, // 设置最小的转换数值
            mediaQuery: false, // 设置媒体查询里的单位是否需要转换单位
            replace: true, // 是否直接更换属性值，而不添加备用属性
            exclude: [/node_modules/] // 忽略某些文件夹下的文件
          }),
          autoprefixer()
        ]
      },
      scss: {
        prependData: `
          $envHeight: ${process.env.VUE_APP_VIEW_HEIGHT}px;
          @import "~@/assets/scss/mixin.scss";
        `
      }
    }
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('components', resolve('src/components'))
      .set('assets', resolve('src/assets'))
      .set('scss', resolve('src/assets/scss'))
      .set('images', resolve('src/assets/images'))
    if (process.env.NODE_ENV === 'production') {
      if (buildConfig.build.productionGzip) {
        config.plugin('CompressionWebpackPlugin')
          .use(CompressionWebpackPlugin, [{
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp(
              `\\.(${['js', 'css'].join('|')
              })$`
            ),
            threshold: 10240,
            minRatio: 0.8,
            deleteOriginalAssets: false
          }])
      }
      if (buildConfig.build.autoCompressAndUpload) {
        config.plugin('CompressUploadPlugin')
          .use(CompressUploadPlugin, [{
            server: require('./config/servers-config').server,
            compress: {
              filename: 'dist.zip',
              outPath: path.join(__dirname, '/target'),
              srcPath: path.join(__dirname, '/dist')
            }
          }, {
            stdout: true
          }])
      }
      if (buildConfig.build.removeConsole) {
        config.optimization.minimizer('terser')
          .tap((args) => [
            Object.assign(args, {
              terserOptions: {
                compress: {
                  warnings: false,
                  drop_console: true,
                  drop_debugger: true,
                  pure_funcs: ['console.log', 'console.group']
                }
              }
            })
          ])
      }
    }
    return config
  },
  configureWebpack: {
    devtool: process.env.NODE_ENV === 'production' ? 'false' : 'source-map'
  }
}

3. 使用方法: vue.config.js中定义的变量叫$envHeight,所以这里也叫$envHeight

@function px2vh($px) {
  @return ($px / $envHeight * 100) * 1vh;
}

height: px2vh(200px);