ember.js - Ember、PostCSS、SASS 和 @apply 的问题

Question

我正在尝试在我的 ember 应用程序中使用 TailwindCSS，我最终使用了这个插件来做到这一点。但不幸的是，其他一些附加组件需要将它们的“scss”文件包含到应用程序样式中。所以我尝试添加 'postcss-sass' 以使其工作。但它不想使用“@apply”命令。目前是否可以使用 postcss 和 sass 以及 @apply 命令？

我的 ember-cli-build.js:

postcssOptions: {
      compile: {
        extension: 'scss',
        enabled: true,
        parser: require('postcss-scss'),
        plugins: [
          {
            module: require('@csstools/postcss-sass'),
            options: {
              includePaths: ['node_modules']
            }
          },
          require('tailwindcss')('./app/tailwind/config.js'),
          ...isProduction ? [purgeCSS] : []
        ]
      }
    }

我收到一个错误: UnhandledPromiseRejectionWarning: Error: Invalid mapping: {"generated":{"line":53,"column":-1},"source":"../../out-338-broccoli_merge_trees_full_application/app/styles/app.scss","original":{"line":52,"column":25},"name":null}
这正是@apply 第一次出现的地方。

Answer 1

结果发现问题在于“app.scss”中缺少分号。当它是一个普通的 css 时它运行良好，当我将它转换为 SASS 时它停止工作。