ruby-on-rails - Webpacker、Rails 6 和 Tailwindcss 意外字符“@”

Question

这一切都始于我想尝试这个名为 flickity 的轮播框架，它可以选择下载为 npm 包，所以我决定这样做。当我下载它时它不起作用，所以我尝试删除 npm 文件并重新捆绑，之后其他一切都停止工作，我一直在寻找答案并使我的应用程序变得更糟。我多次删除了 yarn.lock 和 package json.lock 以及公开的 packs 和 assets 文件夹。它一直说 webpack 找不到 application.css 或者说我的 tailwindcss 导入的意外标记 @。有一次我真的让它工作了，我感觉很好，但后来我决定删除 public/packs 文件夹作为尝试重新加载我的资产的实验，这又打破了它，现在我又回到了这个错误，我不确定为什么。我什么都试过了

这些是我得到的错误

./app/javascript/stylesheets/application.scss 中的错误 1:0 模块解析失败：意外字符 '@' (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件文件。见https://webpack.js.org/concepts#loaders

@import "tailwindcss/base"; | @import "tailwindcss/组件"; | @import "tailwindcss/utilities";

./node_modules/@uppy/core/dist/style.css 中的错误 4:0 模块解析失败：意外令牌 (4:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件文件。见https://webpack.js.org/concepts#loaders | * 适用于 .uppy-Root 容器内所有内容的通用 Uppy 样式 | */

.uppy-根{ | box-sizing：边框框；| 字体家族：-apple-system、BlinkMacSystemFont、“Segoe UI”、Helvetica、Arial、sans-serif、“Apple Color Emoji”、“Segoe UI Emoji”、“Segoe UI Symbol”；

./node_modules/@uppy/dashboard/dist/style.css 中的错误 1:0 模块解析失败：意外字符 '@' (1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理这个文件。见https://webpack.js.org/concepts#loaders

@charset "UTF-8"; | .uppy-告密者 { | 位置：绝对；

这是我的 webpacker.yml 文件

# 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

标签： ruby-on-railswebpacktailwind-css