如何从Webpack Encore中的单个JS文件输出多个CSS文件？

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();