electron-vue配置sass全局变量

方法一

下载安装sass-resources-loader  官方文档https://www.npmjs.com/package/sass-resources-loader

npm install sass-resources-loader

在webpack.renderer.config.js下找到moudle配置项

只需要替换scss后缀的use配置即可,引入你的全局样式文件,这样你样式里面的变量属性就可以在任意文件下使用了

  

全局样式路径

 {
        test: /\.scss$/,
        use: [
          "vue-style-loader",
          "css-loader",
          "sass-loader",
          {
            loader: "sass-resources-loader",
            options: {
              resources:  path.resolve(__dirname, '../src/renderer/styles/index.scss')
            }
          }
        ]
      },

 注意resources的路径一定要是绝对路径,不然很可能找不到全局样式文件

方法二

直接向 node-sass 注入 index.scss

在 .electron-vue/webpack.renderer.config.js 里编辑 vue-loader 的配置

 

此方法更容易一些,可参考官方文档https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using_pre-processors.html