mpvue中sass全局变量的配置方法「代码」-猿码集

1. 什么是sass

Sass是一种用于编写CSS的预处理器语言，它可以帮助我们更加高效地编写CSS样式表，提高CSS代码的可维护性和复用性。Sass提供了许多扩展语法，如变量、嵌套、混合、继承等，让我们在编写CSS时更加灵活自由。

2. 为什么要使用sass

Sass相对于普通CSS具有以下几个优点：

2.1 变量

变量是Sass最常用的功能之一，定义一个变量可以方便地在整个样式表中引用，减少了编写CSS时的重复性代码。变量名以$开头，变量值可以是任意CSS属性的值。

$primary-color: #333;
body {
  color: $primary-color;
}

2.2 嵌套

嵌套可以让我们更加方便地编写具有层次结构的CSS代码，避免了选择器重复书写的问题。在Sass中，选择器可以在一起嵌套，例如：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

2.3 混合

混合是Sass中的一种可重用代码块，类似于函数的概念。通过混合，我们可以将一些常用的样式块封装起来，然后在需要的地方引用。一个混合定义以@mixin关键字开始：

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

2.4 继承

继承可以让一个选择器继承另一个选择器的所有样式，减少了CSS代码的重复性，使得代码更加简洁。使用@extend关键字可以实现继承：

/* 定义一个按钮 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
}
/* 定义一个黑色按钮 */
.btn-black {
  @extend .btn;
  background-color: #000;
}

3. 在mpvue中配置Sass全局变量

在mpvue中使用Sass很方便，只需要在安装Sass加载器之后按照以下步骤进行配置即可：

3.1 安装sass-loader和node-sass

在项目根目录下执行以下命令安装sass-loader和node-sass：

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

3.2 配置sass-loader

在webpack.base.conf.js中添加sass-loader配置：

{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

3.3 添加全局变量文件

在src目录下创建一个名为_variables.sass的文件，用于存放全局变量。

3.4 修改build / webpack.base.conf.js中配置

在build/webpack.base.conf中的module.exports中添加以下配置：

// ...省略其他配置
const utils = require('./utils')
const generateSassResourceLoader = require('./generateSassResourceLoader')
module.exports = {
  // ...省略其他配置
  module: {
    rules: [
      // ...省略其他配置
      {
        test: /\.sass$/,
        use: [
          isProduction ? MiniCssExtractPlugin.loader : 'vue-style-loader',
          'css-loader',
          generateSassResourceLoader('src/styles/variables.sass'), //注意这里，需要配置生成loader
          'sass-loader'
        ]
      }
    ]
  }
}

3.5 配置generateSassResourceLoader.js文件

在build目录下创建一个名为generateSassResourceLoader.js的文件，用于生成Sass的全局变量。修改该文件的代码如下：

const utils = require('./utils')
const path = require('path')
const fs = require('fs')
const glob = require('glob')
function resolve(dir) {
  return path.join(__dirname, '..', dir)
}
function generateSassResourceLoader(resource) {
  const loaders = [
    utils.cssLoaders({
      sourceMap: false,
      extract: true
    }).sass
  ]
  const { result, resources } = loadSassResources(resource)
  if (resources) {
    loaders.push({
      loader: 'sass-resources-loader',
      options: {
        resources
      }
    })
  }
  return loaders
}
function loadSassResources(resource) {
  const result = {}
  const resources = glob.sync(resource)
  if (resources.length) {
    result.resources = resources.map(file => path.resolve(file))
    result.result = resources.map(file => `
      @import "${file}";
    `).join('')
  }
  return result
}
module.exports = generateSassResourceLoader

3.6 添加全局变量

打开src/styles/_variables.sass文件，添加全局变量，例如：

$primary-color: #333;
$border-color: #ccc;

3.7 在组件中使用全局变量

在需要使用的组件中引入Sass文件，并使用全局变量，例如：

@import "styles/variables.sass";
.container {
  padding: 20px;
  border: 1px solid $border-color;
}

4. 总结

Sass是一种编写CSS的预处理器语言，主要具有变量、嵌套、混合、继承等功能，可以大大提高我们编写CSS的效率和可维护性。在mpvue中配置Sass的全局变量，主要需要安装sass-loader和node-sass，然后在webpack.base.conf.js中添加sass-loader的配置，再生成Sass的全局变量并在组件中使用即可。

mpvue中sass全局变量的配置方法「代码」