如何在vue-cli v3.x中使用sass-resources-loader添加全局SCSS变量与混入

Hey there! Setting up global SCSS resources in vue-cli@3.x is a total time-saver—no more importing variables/mixins in every single component. Let me walk you through the exact steps to make this work with sass-resources-loader:

Step 1: Install the Required Dependency #

First, you'll need to add sass-resources-loader to your dev dependencies. Open your terminal and run either:

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

Or if you prefer Yarn:

yarn add sass-resources-loader -D

Note: If you haven't already set up SCSS in your vue-cli project, you'll also need node-sass and sass-loader—but if you selected SCSS during project creation, these should already be installed.

Step 2: Configure vue.config.js #

vue-cli@3.x hides the webpack config by default, so you'll need to create a vue.config.js file in your project's root directory if it doesn't exist already. Then add the following configuration to it:

module.exports = {
  chainWebpack: config => {
    // Target all SCSS rules in the project
    const scssRule = config.module.rule('scss')
    
    // Iterate through all oneOf rules under the SCSS rule
    scssRule.oneOfs.store.forEach(oneOf => {
      oneOf
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          // Add paths to your global SCSS files here
          // You can include multiple files as an array
          resources: [
            './src/styles/_variables.scss',
            './src/styles/_mixins.scss'
          ]
        })
        .end()
    })
  }
}

Adjust the resources paths to match where you store your global SCSS files. For example, if your files are in src/assets/styles, update the paths accordingly.

Step 3: Create Your Global SCSS Files #

Now create your variable and mixin files. Let's say you put them in src/styles/:

_variables.scss #

// Global color variables
$primary-color: #42b983;
$secondary-color: #35495e;
$border-radius: 6px;

_mixins.scss #

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

// Responsive text mixin
@mixin responsive-text($size) {
  font-size: $size;
  @media (max-width: 768px) {
    font-size: $size * 0.8;
  }
}

Step 4: Use Global Resources in Components #

That's it! Now you can use your variables and mixins directly in any component's style section without importing them:

<template>
  <div class="card">
    <h1 class="card-title">Hello Global Styles!</h1>
  </div>
</template>

<style lang="scss">
.card {
  background-color: $primary-color;
  border-radius: $border-radius;
  padding: 20px;
  @include flex-center;
  height: 200px;
}

.card-title {
  color: $secondary-color;
  @include responsive-text(24px);
}
</style>

Quick Troubleshooting Tips #

• Double-check your file paths in vue.config.js—a wrong path will break the setup.
• If you're using dart-sass instead of node-sass, ensure you're on a recent version of sass-resources-loader to avoid compatibility issues.
• Restart your dev server after making changes to vue.config.js—config changes won't take effect until you do.

内容的提问来源于stack exchange，提问作者Pranesh Ravi