javascript - 通过构建 scss 模块在 webpack 编译中出错
问题描述
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
--------------
我的需求:有人可以告诉我为什么会出现此错误并告诉我解决方法吗?先感谢您
解决方案
它应该只适用于import('../scss/p/services/_.scss')
没有任何回调的部分
推荐阅读
- java - 如果模式以 ; 结尾,则 Java 正则表达式匹配字符串 或无
- javascript - Javascript 方法会自动转义引号吗?
- octobercms - 如何从树枝过滤器渲染组件?
- angular - 如何使用 formBuilder 在单击带有验证和初始值的按钮时创建新表行
- android - 用 IDE 等特定单词为文本着色
- swift - macOS Privileged Helper 无权访问文件系统路径?
- azure - 使用 Azure 服务总线向客户端发送消息 - 主题
- cxf - Log soap request and response using apache-cxf
- angular - Angular 库(具有功能导入支持 import {a1} from 'my-lib/1a' )
- ios - WKWebView: Use same delegate code (WKNavigationDelegate) in multiple view controllers