vue-electron構成lessまたはsassグローバル変数

ヘッダーの高さ、トピックの色、サイドバーの幅など、lessまたはsassでグローバル変数を定義することがよくあります.この場合、lessまたはsassグローバルファイルを定義する必要があります.vue-electronでどのように使用しますか.
インストールlessまたはsassをダウンロードする必要があります.次はlessをダウンロードするコマンドです.npm install less less-loader --save-dev
まず、sass-resources-loaderをダウンロードします.使用するlessまたはsassにかかわらず、sass-resources-loaderパッケージをダウンロードする必要があります.npmコマンドは次のとおりです.npm install sass-resources-loader --save-dev
まず、vue-electronでのlessの使用方法1、.eleectron-vue/webpack.renderer.config.jsでのmodule構成で次のコードを見つけます.

module: {
     
    rules: [
      {
     
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      }
    ]
  },

2、それからコードを修正して、このコードを次のように修正します.

module: {
     
    rules: [
      {
     
        test: /\.less$/,
        use: [
            'vue-style-loader',
            'css-loader',
            'less-loader',
            {
     
              loader: 'sass-resources-loader',
              options: {
     
                resources: path.resolve(__dirname,'../src/renderer/assets/less/common.less'),//      less       
              }
            }
        ]
      }
    ]
  },

注意resources後のファイルパスはlessグローバル変数を格納するパスです.resourcesのパスは必ず絶対パスであることに注意してください.そうしないと、グローバルスタイルファイルが見つからない可能性があります.このとき、定義したcommon.lessファイルに変数を宣言できます.例えば@navColor:red;@imgHeight: 50px;
次に、common.lessファイルで宣言された変数を任意のコンポーネントで使用できます.たとえば、

<style scoped lang="less">
	.nav-bar{
     
			background-color: @navColor;
	}
</style>

次にsassの使い方についてお話しします.理屈はlessメソッドとほぼ一致します1.eleectron-vue/webpack.renderer.config.jsのmodule構成では、次のコードが見つかります.

module: {
     
    rules: [
      {
     
        test: /\.scss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      },
    ]
  },

2、それからコードを修正して、このコードを次のように修正します.

module: {
     
    rules: [
      {
     
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            'less-loader',
            {
     
              loader: 'sass-resources-loader',
              options: {
     
                resources: path.resolve(__dirname,'../src/renderer/assets/less/common.sass'),//      sass       
              }
            }
        ]
      }
    ]
  },

次に、common.lessファイルの接尾辞名を.sassに変更するだけで、上記の方法と一致します.
sassには2つ目の方法があり、node-sassにindex.scssを直接注入するには、公式ドキュメントを参照してください.https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using_pre-processors.html