Symfony 4网页包sass加载程序

我不熟悉网页包装技术。我有这样的文件夹结构

我需要将所有SCS编译为css，并在页面目录中保留子文件夹。在本例中，我需要将css文件放在/public/build/assets/scss/page/home/index.css中

这是我的webpack.config.js文件

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

Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')

/*
 * ENTRY CONFIG
 *
 * Add 1 entry for each "page" of your app
 * (including one that's included on every page - e.g. "app")
 *
 * Each entry will result in one JavaScript file (e.g. app.js)
 * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
 */
.createSharedEntry('app', './assets/js/app.js')
.addEntry('page', './assets/js/page.js')
//.addEntry('page2', './assets/js/page2.js')

/*
 * FEATURE CONFIG
 *
 * Enable & configure other features below. For a full
 * list of features, see:
 * https://symfony.com/doc/current/frontend.html#adding-more-features
 */
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())

// enables Sass/SCSS support
.enableSassLoader(function(options) {
    // https://github.com/sass/node-sass#options
    // options.includePaths = [...]
})

.autoProvidejQuery()

.enablePostCssLoader()

.configureFilenames({
    images: '[path][name].[hash:8].[ext]',
    fonts:  '[path][name].[ext]'
})

// uncomment if you use TypeScript
//.enableTypeScriptLoader()

// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
;

const config = Encore.getWebpackConfig();
config.watchOptions = {
    poll: true,
};

module.exports = config;

和我的page.js，我在其中扫描此文件夹中的所有文件

const sassContext = require.context('../scss/page', true, /\.(scss)$/);
sassContext.keys().forEach(sassContext);

但所有文件都是在/public/build/assets/page.css中生成的。你知道如何正确地做吗

编辑（1）

我从webpack.config.js中删除addEntry（page.js），并以这种方式加载样式表

var scssFile = walkSync(__dirname + '/assets/scss/page/');

scssFile.forEach(function(value) {
    var mapReplace = {
       "/scss":"/css",
       ".scss":""
    };
    var input  = value.replace(/\/scss|\.scss/gi, function(matched){
        return mapReplace[matched];
    }); 
    var output = '.' + value;
    Encore.addStyleEntry(input,output);
});

---

WalkSync是一个递归扫描目录并返回完整文件路径数组的函数。您认为这是一个好主意吗？

为什么要控制结果文件结构

你很快就会看到这个网页自己做得很好。 如果您担心css文件中引用的图像文件，这些文件将被复制到webpack编译的构建文件夹中

另外，您的page.js具体做什么？将sass文件转换为CSS不需要任何其他脚本

编辑：

webpack的工作方式是将一组文件（样式表和js）打包在一起

我通过创建一个包含整个网站所有全局文件的“应用程序”包来处理我的应用程序，然后为每个页面创建单独的文件，其中只包含他们需要的文件。但最终，您将只有一个“应用程序”文件和一个“页面”文件

以下是一个配置示例：

.addEntry(
        'app',
        [
            './assets/scss/app.scss',

            './assets/js/app.js'
            './assets/js/jquery.js',
        ]
    )

.addEntry(
        'dashboard',
        [
            './assets/scss/pages/dashboard.scss'
        ]
    ) 

然后在你的页面中，你这样称呼他们：

<link href="{{ asset('build/app.css') }}" />
<link href="{{ asset('build/dashboard.css') }}" />

<script src="{{ asset('build/app.js') }}></script>

我想要控制结果文件的结构，因为我不需要在所有页面上加载所有样式表。我几乎是有意的，但这种解决方案有一个缺点。如果您有很多页面，那么您必须手动添加每个页面。我在想，如果你一个接一个地加载你的样式表，这会给浏览你的页面的用户带来性能问题。样式表和JavaScript文件应该总是被修改和缩小，因此用户必须加载尽可能少的样式表和JavaScript文件。如果您有太多的样式表，这就成了一个问题，那么您的项目结构可能有问题。您需要识别具有类似需求的页面，并对它们的共同文件进行分组。即使其中一些页面不需要一两个文件，您也可以将它们放在一起，因为它们将被导航器缓存。我没有性能问题，因为我在每个页面上都有两个样式表。现场的一般人员和个人。两者都被缩小了。脚本只生成一个文件夹结构，我决定通过像这样的“主页”页面和像这样的“联系人”页面上的添加链接href来附加哪个文件夹结构。您是否使用外部库来缩小您的资产？因为webpack基本上就是这样做的：它编译、重组和缩小您的资产。您所要做的就是重新组合属于网站特定部分的资产，调用addentry，给出一个标识符，然后添加所有css、sass、less、javascript甚至typscript文件。如果试图控制生成文件夹的行为方式，您将遇到问题。