How to use SCSS for style customization in Vue

How to use SCSS for style customization in Vue

In the Vue project, in order to better customize the style, it is a good idea to use SCSS (Sassy CSS) choose. SCSS is an extension language of CSS. It provides many useful features, such as nested rules, variables, mixing, etc., allowing us to write style code more efficiently. The following will introduce how to use SCSS for style customization in Vue projects, and provide some specific code examples.

First, we need to prepare the Vue project and configure the SCSS compiler in the project. Commonly used SCSS compilers include node-sass and sass-loader. You can choose one of them to use according to your own needs. The following example uses sass-loader as the compiler.

1. Installing dependencies

Enter the root directory of the Vue project in the terminal and execute the following commands to install sass-loader and node-sass:

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

2. Create SCSS files

Create a new folder in the project's src directory to store SCSS files. For example, we create a folder called styles and inside it a file called main.scss. This main.scss file will be used to write our global styles.

3. Configure webpack

Find the webpack configuration file in the root directory of the project, usually webpack.config.js or vue.config.js, and then in the configuration file Add support for SCSS.

Find the module.exports section in the configuration file, and then add the following code:

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

This configures webpack's support for SCSS files.

4. Writing SCSS code

In the main.scss file, we can write global styles, such as defining some variables, mixins, etc., for use by the entire project.

Sample code:

// 定义颜色变量
$primary-color: #42b983;
$secondary-color: #f44336;

// 定义混合
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
}

// 样式示例
.container {
  background-color: $primary-color;
  padding: 20px;

  .title {
    color: $secondary-color;
  }

  .button {
    @include box-shadow(2px, 2px, 5px, #ccc);
    background-color: $secondary-color;
    color: $primary-color;
  }
}

5. Introducing SCSS files into Vue components

To use SCSS-defined styles in Vue components, you need to add Import SCSS files into the