Question

我正在尝试将Javascript和scss文件连接/编译为单独的文件和不同的位置，我想我缺少一些东西来使其按需工作。

我正在使用webpack4和Laravel。

这是我的资源结构：

resources/
    sass/
        Sites/
        app.scss
            Domain1/
                domain.scss
                Pages/
                    PageName/
                        page.scss
            Domain2/
                domain.scss
                Pages/
                    PageName/
                        page.scss
resources/
    js/
        Sites/
            Domain1/
                app.js
                Pages/
                    PageName/
                        index.js
            Domain2/
                app.js
                Pages/
                    PageName/
                        index.js

我想结束这种结构 css：

resources/
    css/
        Sites/
            Domain1/
                Pages/
                    PageName/
                        main.css (contain app.scss + domain.scss + page.scss)
            Domain2/
                domain.scss
                Pages/
                    PageName/
                        main.css

，对于javascript：

resources/
    js/
        Sites/
            Domain1/
                Pages/
                    PageName/
                        main.js (contain app.js + index.js)
            Domain2/
                domain.scss
                Pages/
                    PageName/
                        main.js

具有良好的域/页面javascript / scss文件。 scss和javascript的结构相同。

如果遵循了许多教程，文档等等，但是我无法达到预期的效果。这是我的webpackconfig文件和输入对象：

进入对象：

{
'css/Sites/Focus/Admin/Pages/Home': [
    './resources/sass/Sites/app.scss',
    './resources/sass/Sites/Focus/Admin/domain.scss',
    './resources/sass/Sites/Focus/Admin/Pages/Home/page.scss'
],
'css/Sites/Focus/Admin/Pages/Routes': [
    './resources/sass/Sites/app.scss',
    './resources/sass/Sites/Focus/Admin/domain.scss',
    './resources/sass/Sites/Focus/Admin/Pages/Routes/page.scss'
],
'css/Sites/Focus/Www/Pages/Home': [
    './resources/sass/Sites/app.scss',
    './resources/sass/Sites/Focus/Www/domain.scss',
    './resources/sass/Sites/Focus/Www/Pages/Home/page.scss'
],
'js/Sites/Focus/Admin/Pages/Home': [
    './resources/js/Sites/Focus/Admin/app.js',
    './resources/js/Sites/Focus/Admin/Pages/Home/index.js'
],
'js/Sites/Focus/Admin/Pages/Routes': [
    './resources/js/Sites/Focus/Admin/app.js',
    './resources/js/Sites/Focus/Admin/Pages/Routes/index.js'
],
'js/Sites/Focus/Www/Pages/Home': [
    './resources/js/Sites/Focus/Www/app.js',
    './resources/js/Sites/Focus/Www/Pages/Home/index.js'
]

}

这是我的module.export：

module.exports = {
entry:  finalEntriesObject,
output: {
    path: __dirname + '/public/',
    filename: '[name]/main.js'
},
module: {
    rules: [
        /**
         * Running Babel on JS files.
         */
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: 'public/[name]/main.css',
                    }
                },
                {
                    loader: 'extract-loader'
                },
                {
                    loader: 'css-loader?-url'
                },
                {
                    loader: 'postcss-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }
    ]
},

};

javascript串联工作正常，最终结构良好，但是我正努力通过scss编译/串联实现相同的功能。

你们可以帮助我获得所需的结构吗？

Webpack在单独文件上的动态串联

0 个答案: