Ember、PostCSS、SASS 和 @apply 的问题

Posted 2023-03-06

【中文标题】Ember、PostCSS、SASS 和 @apply 的问题

【英文标题】：Problems with Ember, PostCSS, SASS and @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 会抛出错误。

【参考方案1】：

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