sass - 让 svelte-material-ui 与 snowpack 和 sass 一起使用
问题描述
我正在尝试使用 snowpack 使用纤细的材质 UI。我已经安装了 Snowpack 和 Snowpacks svelte 模板,如下所示:
npm install --save-dev snowpack@next
npx create-snowpack-app xpapp --template @snowpack/app-template-svelte
这有效,示例苗条页面出现。接下来,我按照 Svelte Material UI 说明“将其捆绑在您自己的代码中”,如此处说明中的“使用”一章所述:https ://github.com/hperrin/svelte-material-ui#usage
所以我安装了 Sass 并在我的snowpack.config.json
文件中配置它,如下所示:
{
"extends": "@snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
我在这里遵循了(非常简洁的)说明:https ://www.snowpack.dev/#sass
src/theme/_smui-theme.scss
按照说明,我还向源文件添加了一个空文件,并安装了 nessecary @smui 组件。
问题是我目前在启动 snowpack 开发服务器时遇到此错误:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... @smui/icon-button, @smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/@smui/icon-button/_index.scss
Error: Unexpected character '@' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
似乎无法识别@import
Material UI 中的语句。_index.scss
我认为 Snowpack 应该解释/转换 .scss 文件,但它似乎没有这样做。
解决方案
所以我在使用 Svite 和 Snowpack 时遇到了同样的问题。我能够使用裸实现:
// component.svelte <script>
import Button, { Label } from '@smui/button/bare'
import '@smui/button/bare.css'
这就是 Svite 所需的全部内容。
使用 Snowpack,我需要添加rollup-plugin-svelte
和更新snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
推荐阅读
- java - 未知系统变量'query_cache_size'虽然我更新了 pom.xml
- flutter - 如何解析来自网络的 JSON 数据并将其保存到 Flutter SQFLite 数据库中?
- python - PyPDF2 - 结合 PdfFileWriter 和 PdfFileMerger 输出一个 PDF 文件
- sql - 从两个不同的表插入到两个不同的表中
- php - 如何在子目录中设置 .htaccess 文件?(提交表格失败)
- reactjs - 如何在 React (RCA) + Koa (Sequelize + PostrgeSQL) 中使用 PayPal/Transferwise/Bill.com/Payoneer 提取资金(收益)
- c# - 如何为我的后台服务编写单元测试?
- ionic-framework - 在离子范围旋钮内插入离子范围值
- r - 如何将每日时间序列降雨数据排列到单列?
- python - 模块 skimage.color 中缺少对象