通过构建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:laravelresourcesassetspresetscsspservices_.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')部分，而不需要任何回调