Electron Webpack Vue全局变量

Question

我现在正试图花费几个小时来使全局变量在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'
        }
      }
    ]
  }

App.vue

background-color: $gray;

错误：

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

Answer 1

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

可能的解决方案

假设您的webpack.config.js文件与src/在同一目录中：

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