electron-vue 에서 sass 전역변수 사용하기

공식 Document 에서는 아래와 같이 하라고 하는데, 필자 환경에서는 작동하지 않는다. 

 

* .electron-vue/webpack.renderer.config.js 의 vue-loader 수정

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/renderer/globals"',
  scss: 'vue-style-loader!css-loader!sass-loader?data=@import "./src/renderer/globals";'
}

 

무엇이 문제인지는 본질적으로 확인하지 못했다. 해결을 위해 직접 SASS 의 Loader를 아래와 같이 수정해주면 된다.

{
    test: /\.scss$/,
    use: ['vue-style-loader', 'css-loader', {
      loader: 'sass-loader',
      options: {
        data: `
          @import "./src/renderer/global";
        `
      }
    }]
 }

 

정상적으로 global.scss 를 불러와, vue component 에서 사용이 가능하다.