Electron Webpack Vue 全局变量答案

【问题标题】：Electron Webpack Vue global variablesElectron Webpack Vue 全局变量
【发布时间】：2019-07-02 19:17:22
【问题描述】：

我现在正在尝试使用 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".

【问题讨论】：

标签： vue.js webpack sass electron

【解决方案1】：

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

可能的解决方案

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

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

【讨论】：