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

Question

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

我知道如何在使用 vue-cli(使用 vue.config.js 配置文件)创建的 vue 应用程序中执行此操作，但我尝试在 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();

有什么想法吗？

Answer 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";'
      }
    })
  });
});