VueJS项目用Webpack Encore构建SCSS时依赖未找到错误求助

Hey there, I know you’ve been stuck on this for two days—let’s get this sorted out quickly! The core issue is a small misconfiguration in your App.vue file, plus a couple of quick dependency checks. Here’s what to do:

1. Fix the Style Tag in App.vue #

Your biggest problem is the lang attribute in your style tag. You wrote <style lang="scss-loader">, but lang should specify the preprocessor language (not the webpack loader name). scss-loader is the tool Webpack uses to process SCSS files, but Vue just needs to know the language is SCSS.

Update your App.vue style section to this:

<style lang="scss">
/* Import Font Awesome Icons Set */
$fa-font-path: 'font-awesome/fonts/';
@import 'font-awesome/scss/font-awesome.scss';

/* Import Simple Line Icons Set */
$simple-line-font-path: 'simple-line-icons/fonts/';
@import 'simple-line-icons/scss/simple-line-icons.scss';

/* Import Bootstrap Vue Styles */
@import 'bootstrap-vue/dist/bootstrap-vue.css';

// Import Main styles for this application
@import './assets/scss/style.scss'; // Added .scss suffix for clarity
</style>

(I also added the .scss suffix to your main style import—this helps Webpack resolve the file more reliably.)

2. Verify Required Dependencies Are Installed #

Symfony Encore’s enableSassLoader() needs the right preprocessor packages to work. Run this command to make sure you have the latest, supported tools (we’ll use sass instead of the deprecated node-sass):

yarn add sass-loader sass --dev

3. Clean Cache & Reinstall Dependencies #

Sometimes cached node modules or lock files can cause weird issues. Let’s start fresh:

# Delete node_modules and lock file
rm -rf node_modules
rm yarn.lock

# Reinstall all dependencies
yarn install

4. Restart the Development Server #

Now run your dev command again:

yarn run dev --watch

Why This Worked #

That long, confusing error message was because Vue was trying to use scss-loader as the language identifier, which made Webpack look for a non-existent chain of loaders. By fixing the lang attribute to scss, you’re telling Vue to use the SCSS preprocessor setup you already configured with Encore’s enableSassLoader().

Your Webpack config looks good—enableVueLoader() and enableSassLoader() are correctly set up, so once the style tag is fixed and dependencies are in place, everything should compile smoothly.

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