vue2中使用sass并配置全局的sass样式变量的方法

下面是详细讲解“vue2中使用sass并配置全局的sass样式变量的方法”的攻略：

1. 安装依赖

首先，需要安装sass-loader、node-sass和sass-resources-loader这三个依赖：

npm install sass-loader node-sass sass-resources-loader --save-dev

其中，sass-loader和node-sass是将sass转换成css的工具，sass-resources-loader是用来共享sass变量的工具。

2. 配置webpack

修改webpack.base.conf.js文件，增加sass-resources-loader插件的配置：

const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  ...
  module: {
    rules: [
      ...,
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: [resolve('src/assets/style/variables.scss')]
            }
          }
        ]
      }
    ]
  },
  ...
}

其中，sass-resources-loader插件的resources选项为要共享的sass变量文件路径。

3. 配置全局sass样式变量

在src/assets/style文件夹下新建一个variables.scss文件，写入样式变量：

$primary-color: #1890ff;
$border-radius-base: 4px;

4. 在组件中引用sass样式

在.vue文件中，可以像以下方式引用全局sass样式变量：

<style lang="scss">
  .button {
    background-color: $primary-color;
    border-radius: $border-radius-base;
  }
</style>

示例1

在上面的variables.scss文件中，增加一个样式变量：

$success-color: #52c41a;

在组件中引用：

<style lang="scss">
  .button {
    background-color: $success-color;
  }
</style>

示例2

在src/assets/style文件夹下新建一个mixin.scss文件，写入mixin样式：

@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

在组件中引用：

<style lang="scss">
  .container {
    @include center;
  }
</style>

这样，就可以在vue2中使用sass并配置全局的sass样式变量了。