如何使用汇总从 @material 导入 scss 文件？答案

【问题标题】：How do I import scss files from @material using rollup?如何使用汇总从 @material 导入 scss 文件？
【发布时间】：2020-02-04 02:10:11
【问题描述】：

我有一个简单的汇总项目，其结构如下

src
  index.mjs
  style.sass
package.json
rollup.config.mjs

在我的汇总文件中，我创建了这样的插件...

const pcss = postcss({
    preprocessor: (content, id) => new Promise((resolve, reject) => {
      const result = sass.renderSync({
        file: id,
        includePaths: ["src", "node_modules"]
      })
      resolve({ code: result.css.toString() })
    }),
    plugins: [
      autoprefixer
    ],
    extensions: ['.sass', '.scss']
})

然后我在我的 sass 文件中进行简单的导入...

@import "@material/button/mdc-button";

但是当我运行它时，我得到...

Error: File to import not found or unreadable: @material/button/mdc-button.
  at options.error (/Users/jackiegleason/Code/jrg-material/packages/components/node_modules/node-sass/lib/index.js:291:26)

如果我改成

@import "~@material/button/mdc-button";

我离……更近了一点

错误：找不到或无法读取要导入的文件：@material/elevation/mixins。

如何让它识别没有扩展名的文件，以便其他导入工作？

【问题讨论】：

标签： sass rollup node-sass

【解决方案1】：

我让它像这样工作......

const pcss = postcss({
    modules: true,
    extensions: ['.sass', '.scss'],
    namedExports: true,
    plugins: [
        autoprefixer
    ],
    use: [
        [
            'sass', {
                includePaths: [path.resolve('node_modules')]
            }
        ]
    ]
})

【讨论】：