构建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') 部分一起工作，没有任何回调

构建scss模块webpack编译报错

Error in webpack compilation by building a scss module

javascript

webpack

sass

sass-loader

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