通過構建 scss 模塊在 webpack 編譯中出錯

Question

scss文件動態導入規則！

{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                injectType: 'linkTag',
                insert: function (self)
                {
                    const [head, script] = document.querySelectorAll('head, #bundle');
                    head.insertBefore(self, script);
                }
            }
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'sass-loader',
            options: {
                webpackImporter: false
            }
        },
        {
            loader: 'file-loader',
            options: {
                name: '[contenthash].css',
                outputPath: '../../static/css',
                publicPath: '/static/css'
            }
        }
    ]
}

測試腳本：

import('../scss/p/services/_.scss')
.then((style) =>
{
    style.use()
})

我的 scss 文件的內容：

body
{
    height: 100vh; width: 100vw;
    background-color: red;
}

我通過運行 webpack 得到的錯誤：

ERROR in ./preset/scss/p/services/_.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--6-2!./node_modules/file-loader/dist/cjs.js??ref--6-3!./preset/scss/p/services/_.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "e": expected 1 selector or at-rule, was 'export default "/st'
        on line 1 of E:\laravel\resources\assets\preset\scss\p\services\_.scss
>> export default "/static/css/5fefc2951114114edc21868f8866ac3d.css";
   ^

 @ ./preset/scss/p/services/_.scss 2:26-213
 @ ./preset/ts/main.ts

--------------

我的需求：有人可以告訴我為什么會出現此錯誤並告訴我解決方法嗎？ 先感謝您

Answer 1

它應該只與import('../scss/p/services/_.scss')部分一起工作，沒有任何回調