webpack - Webpacker , Rails 6, and Tailwindcss Unexpected character '@'

Question

This all started when I wanted to try out this carousel framework called flickity it had the option to download as a npm package so I decided to do it that way. When I downloaded it it wasnt working so I tryed to delete the npm files and rebundle after that everything else stopped working and I kept looking up answers and making my app worse. I deleted yarn.lock and package json.lock alot of times and also the packs and assets folder in public. It kept either saying webpack cant find application.css or said unexpected token @ for my tailwindcss imports. At one point I actually got it working and I felt so good but then I decided to delete the public/packs folder as an experiment to try to reload my assets and that broke it again, and now Im back on this error and im not sure why. Ive tried everything, if anybody knows what the problem is it would be so helpful

these are the errors im getting

ERROR in ./app/javascript/stylesheets/application.scss 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@import "tailwindcss/base"; | @import "tailwindcss/components"; | @import "tailwindcss/utilities";

ERROR in ./node_modules/@uppy/core/dist/style.css 4:0 Module parse failed: Unexpected token (4:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | * General Uppy styles that apply to everything inside the .uppy-Root container | */

.uppy-Root { | box-sizing: border-box; | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

ERROR in ./node_modules/@uppy/dashboard/dist/style.css 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

@charset "UTF-8"; | .uppy-Informer { | position: absolute;

this is my webpacker.yml file

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: ['app/javascript/stylesheets']

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    # Inject browserside javascript that required by both HMR and Live(full) reload
    inject_client: true
    # Hot Module Replacement updates modules while the application is running without a full reload
    hmr: false
    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
    inline: true
    # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
    overlay: true
    # Should we use gzip compression?
    compress: true
    # Note that apps that do not check the host are vulnerable to DNS rebinding attacks
    disable_host_check: true
    # This option lets the browser open with your local IP
    use_local_ip: false
    # When enabled, nothing except the initial startup information will be written to the console.
    # This also means that errors or warnings from webpack are not visible.
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

question from:https://stackoverflow.com/questions/65944032/webpacker-rails-6-and-tailwindcss-unexpected-character

Answer 1

Waitting for answers