Doesn't work with ember-cli-sass

[BryanHunt]

If you try to use this with ember-cli-sass, you get:

Build Error (PostcssCompiler)

File not found: /app/styles/app.css

[mehran-naghizadeh]

I have the exact same issue.

[robclancy]

I did a lot of changes using a postcss plugin to get this working. But then the error came back up again, and then I just changed the app.css to app.scss and that might be all that is needed here.

[clintongreen]

Yeah I toiled over trying to get this to work. Changing app.css to app.scss helped but I still had issues when importing sass files with variables. Eventually I gave up and used vanilla css, it would be great if this worked with sass.

[chrism]

One reason I adopted tailwind was to move away from ember-cli-sass to postcss, so I can’t really help on this.

However, EmberMap have released a free video on integrating Tailwind in this way without an addon to a project which does use SCSS.

It might be useful?

https://embermap.com/video/using-postcss-and-tailwind

One point—it doesn't cover PurgeCSS.

[mcfiredrill]

I think I'm having the same or a similar issue. I'm trying to use an addon that uses sass, ember-power-select, in my project that I setup tailwind with using the instructions in this repo.

After installing it and starting the ember server I get the same error:

Build Error (PostcssCompiler)

File not found: /app/styles/app.css
in any of the following include paths:
  /tmp/broccoli-17388uEvslS672zfZ/out-290-broccoli_merge_trees_full_application

I watched that embermap video and figured out I should be using filter instead of compile for my postcssOptions, to get it to work with sass.

    postcssOptions: {
      compile: {
        enabled: false,
      },
      filter: {
        enabled: true,
        plugins: [require('tailwindcss')('./app/tailwind/config.js')]
      }
    }

This seems to get everything working, the previous error went away. However in the browser I'm getting a mime type mismatch.

Refused to apply style from 'http://localhost:4200/assets/streampusher-frontend.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Should I file this issue with ember-cli-postcss?

[mcfiredrill]

Alright so I tried using the "Switching from Sass" instructions on the ember-cli-postcss readme. https://github.com/jeffjewiss/ember-cli-postcss#switching-from-sass

I've got it working now.

[chrism]

This is great news @mcfiredrill !

If you get chance could you quickly share the steps please and then I’ll add it to this guide?

[mcfiredrill]

I pretty much followed the steps here verbatim: https://github.com/jeffjewiss/ember-cli-postcss#switching-from-sass (also had to install postcss-scss and @csstools/postcss-sass) I can try to whip up a PR for the README.

[chrism]

Thanks, I think thats already a big help.

For a PR- that would be amazing if you could !

I’d like to include details—but as I’m not using SASS myself I don’t feel too confident about writing it.

[BryanHunt]

@mcfiredrill When I try those instructions with ember-bootstrap, I get:

Build Error (PostcssCompiler) in /var/folders/0p/35rj_jpx365f0plgs12ydxw40000gn/T/broccoli-21914TiD3HlAKEmWO/out-259-broccoli_merge_trees_full_application//app/styles/app.scss#sass:1:9

File to import not found or unreadable
  ╷
1 │ @import "ember-bootstrap/bootstrap";

[mcfiredrill]

@BryanHunt I'm not using ember-bootstrap so I'm not sure, but did you set the includePaths option listed here? https://github.com/jeffjewiss/ember-cli-postcss#switching-from-sass

I imagine you would want to add ember-bootstrap's path in there, maybe something like this.

          options: {
            includePaths: [
              'node_modules/ember-bootstrap',
            ],

[Mifrill]

I did face the same issue. The intention was: setup tailwind with sass to use app.scss, so, I did find this working solution: https://github.com/harisadam/ember-tailwind-postcss-scss May some interested it