Ember、PostCSS、SASS 和 @apply 的问题答案

【问题标题】：Problems with Ember, PostCSS, SASS and @applyEmber、PostCSS、SASS 和 @apply 的问题
【发布时间】：2020-05-31 16:58:54
【问题描述】：

我正在尝试在我的 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 第一次出现的地方。

【问题讨论】：

我们使用了exact same configuration，对我们来说效果很好。另外，我注意到当类名无效时，@apply 会抛出错误。

标签： ember.js sass postcss tailwind-css

【解决方案1】：

原来问题在于“app.scss”中缺少分号。当它是一个普通的 css 时它工作得很好，当我将它转换为 SASS 时它就停止工作了。

【讨论】：