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

首先我们先讲less在vue-electron中的使用方法
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也有第二种方法,直接向 node-sass 注入 index.scss 可参考官方文档:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using_pre-processors.html