Symfony + Vue - 使用 Webpack Encore 在所有 Vue 组件中导入 _variables.scss答案

【问题标题】：Symfony + Vue - import _variables.scss in all Vue components using Webpack EncoreSymfony + Vue - 使用 Webpack Encore 在所有 Vue 组件中导入 _variables.scss
【发布时间】：2025-12-15 20:20:13
【问题描述】：

我正在使用 Symfony + Vue.js，我想在所有 vue 组件中导入我的 _variables.sccs 文件。我想在所有组件的样式块中使用 scss 变量

我知道如何在使用 vue-cli 创建的 vue 应用程序中执行此操作（使用 vue.config.js 配置文件），但我尝试在 Encore 使用的 webpack.config.js 中以不同方式复制它...而且没有办法让它工作。

这是我的 webpack.config.js 文件：

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app/app.js')

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

    // enable Vue.js
    .enableVueLoader()

    .configureWatchOptions(function (watchOptions) {
        watchOptions.poll = 250;
    })
;

module.exports = Encore.getWebpackConfig();

有什么想法吗？

【问题讨论】：

标签： symfony vue.js webpack webpack-encore

【解决方案1】：

这就是我使用 Vue 3 和 AdonisJS 5 的方式

// webpack.config.js

Encore.enableVueLoader(() => { }, {
  version: 3,
  runtimeCompilerBuild: false,
  useJsx: false,
})

Encore.configureLoaderRule('scss', loaderRule => {
  loaderRule.oneOf.forEach(rule => {
    rule.use.forEach(loader => {
      if (loader.loader.indexOf('sass-loader') > -1) {
        loader.options.additionalData = '@import "./resources/css/_import-everywhere.scss";'
      }
    })
  });
});

【讨论】：

【解决方案2】：

我也对这个很好奇。我在网上找到了以下应该添加到 Symfony Webpack 文件中的代码：

.enableVueLoader(function(options) {
    options.loaders.scss.forEach(loader => {
        if(loader.loader === 'sass-loader') {
            loader.options = {
                sourceMap: true,
                data: `
                    @import "./assets/css/common/variables";
                `
            }
        }
    });
})

但在我的情况下，这不起作用，因为回调函数中的选项为空。

【讨论】：

【解决方案3】：

您可以使用sass-resources-loader 来完成这项工作。例如，首先使用 npm 安装此加载程序。

npm install sass-resources-loader

然后使用 Webpack Encore 附带的 .configureLoaderRule 方法。

.configureLoaderRule('scss', (loaderRule) => {
    loaderRule.oneOf.forEach((rule) => {
        rule.use.push({
            loader: 'sass-resources-loader',
            options: {
                resources: [
                    // Change this to your _variables.scss path
                    path.resolve(__dirname, './assets/css/_variables.scss'),
                ]
            },
        })
    })
})

我尝试自己使用 LESS 来完成这项工作，但我花了太多时间才弄清楚它是如何工作的。无论如何，对于使用 LESS 的人，您可以使用不同的加载器，例如：style-resources-loader

【讨论】：

【解决方案4】：

fuxinko 的回答很好，但会发出警告：

警告使用 Encore.configureLoaderRule() 时要小心，这是一种低级方法，如果不小心使用，可能会破坏 Encore 和 Webpack。

在 enableSassLoader 中使用回调应该会得到相同的结果（没有警告）：

    .enableSassLoader(options => {
        options.additionalData = '@import "./resources/css/_import-everywhere.scss";'
    })

请注意，sass 文件中不允许使用分号，因此如果您需要同时编译 scss 和 sass，事情可能会变得更加困难：我已经为类似问题添加了一个可能的解决方案：https://*.com/a/68914128/1370000

【讨论】：

【解决方案5】：

我已经用过几次了。为了让它工作，我启用了 vueLoader 并添加了 vue-style-loader ：


Encore
 //...
  .enableVueLoader()


  .addLoader({
    test: /\.scss$/,
    use: [
      'vue-style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          data: `
              @import "./assets/scss/_variables.scss";
              @import "./assets/scss/_mixins.scss";
            `,
          includePaths: [__dirname]
        },
      },
    ]
  })

【讨论】：