Symfony+；Vue-使用网页包Encore在所有Vue组件中导入_variables.scs

我正在使用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网页包的文件中：

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

---

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

您可以使用

sass资源加载程序来实现这一点。首先使用npm安装此加载程序

npm install sass-resources-loader

然后使用随附的网页包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'),
                ]
            },
        })
    })
})

我试着用更少的钱来完成这项工作，但我花了太多的时间去了解它是如何工作的。无论如何，对于使用较少资源的用户，您可以使用不同的加载程序，如：
样式的资源加载程序
这就是我如何使它与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";'
      }
    })
  });
});