Как вывести несколько файлов CSS из одного файла JS в Webpack Encore?

Question

В моем js-файле "example.js" я хочу импортировать два файла.scss "example.scss" и "example.m.scss" для настольной и мобильной версии веб-сайта соответственно. Поэтому мне нужно три вывода - example.js, example.scss и example.m.scss. Как я могу добиться этого в Webpack Encore?

JS файл:

// CSS
import '../../css/example.scss';
import '../../css/mobile/example.m.scss';

Моя текущая конфигурация Webpack:

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

Encore
// the project directory where all compiled assets will be stored
    .setOutputPath('web/assets')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/assets')

    // this creates a 'common.js' file with jquery and the bootstrap JS module
    // these modules will *not* be included in page1.js or page2.js anymore
    // Just for notice it is wrapped  Webpack CommonsChunkPlugin.
    .createSharedEntry('common', [
        './src/AppBundle/Resources/public/js/main/main.js'
    ])

    // will create web/assets/app.js and web/assets/app.css
    .addEntry('home', './src/AppBundle/Resources/public/js/main_home/main_home.js')
    // entries ...

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // enable source maps during development
    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

// allow sass/scss files to be processed
    .enableSassLoader()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();