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.

时它停止工作

Ember、PostCSS、SASS 和@apply 的问题

Problems with Ember, PostCSS, SASS and @apply

ember.js

sass

postcss

tailwind-css