在Vuex(Nuxt)中能否实现Sass与JavaScript变量共享？配置咨询

Hey there! I get you—you're already using @nuxtjs/style-resources to share your Sass mixins and variables across your Nuxt (with Vuex) project, but you want to know how to achieve the same directly via Webpack. Let's walk through this step by step, since the underlying tool here is actually sass-resources-loader (which the Nuxt module wraps for you).

Step 1: Install Required Dependencies #

First, make sure you have the necessary loaders and preprocessors installed. If you haven't already, run one of these commands based on your package manager:

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

# yarn
yarn add -D sass sass-loader sass-resources-loader

⚠️ Note on versions: For Nuxt 2, stick with sass-loader@10.x (since it's compatible with Webpack 4, which Nuxt 2 uses). For Nuxt 3, you can use the latest versions of these packages.

Step 2: Configure Webpack in nuxt.config.js #

The setup differs a bit between Nuxt 2 and Nuxt 3—let's cover both:

For Nuxt 2 #

You'll need to extend the default Webpack config in your nuxt.config.js file. The goal is to add sass-resources-loader to the Sass processing chain:

export default {
  // ... your existing config (router, modules, etc.)
  build: {
    extend(config, { isDev, isClient }) {
      // Find the rule that handles .scss files
      const sassRule = config.module.rules.find(rule => rule.test.test('.scss'));
      
      if (sassRule) {
        // Add sass-resources-loader after the existing sass-loader
        sassRule.use.push({
          loader: 'sass-resources-loader',
          options: {
            // List all the Sass files you want to globally share
            resources: [
              '@/assets/styles/variables.scss',
              '@/assets/styles/mixins.scss'
              // Add more files here if needed
            ]
          }
        });
      }
    }
  }
}

For Nuxt 3 #

Nuxt 3 uses either Vite or Webpack 5 by default. Here's how to set up global Sass imports for both:

If using Vite (default)

export default defineNuxtConfig({
  // Optional: Import your main global stylesheet
  css: ['~/assets/styles/main.scss'],
  
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // Inject your variables/mixins into every Sass file
          additionalData: `
            @import "@/assets/styles/variables.scss";
            @import "@/assets/styles/mixins.scss";
          `
        }
      }
    }
  }
});

If using Webpack 5

export default defineNuxtConfig({
  css: ['~/assets/styles/main.scss'],
  
  webpack: {
    loaderOptions: {
      scss: {
        additionalData: `
          @import "@/assets/styles/variables.scss";
          @import "@/assets/styles/mixins.scss";
        `
      }
    }
  }
});

Common Pitfalls That Might Have Broken Your Previous Attempt #

• Incorrect file paths: Double-check that your resources paths use @ or ~ to reference the project root (e.g., @/assets/... instead of ./assets/...).
• Loader order: In Nuxt 2, sass-resources-loader must come after sass-loader in the loader chain—if you added it before, it won't work.
• Version conflicts: If you're on Nuxt 2, using a newer sass-loader (v11+) can cause issues with Webpack 4. Stick to v10.x for compatibility.
• Missing dependencies: Make sure you installed both sass (the preprocessor) and sass-loader (the Webpack loader)—one without the other will break things.

Once you've set this up, you can use your variables and mixins in any component's <style scoped> block without importing them manually—just like you did with @nuxtjs/style-resources!

内容的提问来源于stack exchange，提问作者Mieszczańczyk S.