我正在尝试实现材料文本字段 Web 组件。我在这里打开了codesandbox 来进行实验。我关注了他们的documentation，并安装了文本字段，在 sass 中使用了这样的材质样式：
@use "@material/textfield";
@include textfield.core-styles;
但是，我明白了：
错误：“@include 文本字段”后的 CSS 无效：预期 1 个选择器或 按规则，是“.core-styles;”
我该如何解决这个问题？
【问题讨论】：
标签： sass
我遇到了同样的问题，通过删除“node-sass”并安装“sass”来修复它
感谢这个人：
https://github.com/material-components/material-components-web/issues/5502#issuecomment-586061492
【讨论】：
我想 Google 的意思是 webpack 中的一些额外设置，因为实际的问题是他们指令中的每个路径都是文件夹的路径，而不是某个文件的路径。这些文件夹很可能应该被 webpack 解释为一些子包，因为它们都包含 _index.scss 文件。我认为调度规则有问题（包括@forward指令的问题）。
由于以下原因，我没有找到完全自动的决定：
foldername/_index.scss 文件中声明，有时在 foldername/_foldername.scss 文件中声明。尽管foldername/_foldername.scss 文件总是通过@forward 指令添加到foldername/_index.scss 文件中，但它并不总是能正常工作。
因此，为了制作我的 vue.js 适配器，我只需检查哪个文件包含所需的 mixins，然后更正路径并添加别名 - 如下所示：@use "@material/button/button" as button; // here button/button worked fine
@use "@material/checkbox/checkbox" as checkbox;
@use "@material/icon-button/_index.scss" as icon-button; // here had to use checkbox/_index.scss
@use "@material/data-table/data-table";
@include checkbox.core-styles;
@include icon-button.core-styles;
@include data-table.core-styles;
@include data-table.theme-baseline;
@include button.core-styles;【讨论】：
有问题的代码确实有效，但不是在代码盒中，而是在使用 dart-sass 在本地编译时，它可以正常运行。我怀疑 Codesandbox 使用了不支持模块的 SASS 版本，因为它在代码中引发了关于未知 @use 规则的警告。
如果您目前的意图只是进行实验，最简单的方法是通过拖放链接预打包的 CSS：
<link
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
按照here 的描述前往并从您的 SCSS 文件中删除导入（您甚至可以使用预打包的 JS）。对于现实生活中的开发，您可能无论如何都会设置 Webpack。
您可以在此处检查工作沙箱：https://codesandbox.io/s/serene-sara-lgfet
【讨论】：