首页 > 解决方案 > Electron Webpack Vue 全局变量

问题描述

我现在正在尝试几个小时来让全局变量在电子与 webpack 和 vue 中工作,但 vue 找不到声明的变量。

webpack.config.js

{
    test: /\.scss$/,
    use: [
      "vue-style-loader",
      "css-loader",
      {
        loader: "sass-resources-loader",
        options: {
          resources: 'src/assets/scss/custom/_variables.scss'
        }
      }
    ]
  }

应用程序.vue

background-color: $gray;

错误:

background-color: $gray-900;
                     ^
        Undefined variable: "$gray-900".

标签: vue.jswebpacksasselectron

解决方案


您的问题可能是resources从根目录未正确解析路径,因此它们从未真正定义过。

可能的解决方案

假设您的webpack.config.js文件与以下目录位于同一目录中src/

{
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, './src/assets/scss/custom/_variables.scss')
  },
}

推荐阅读