Javascript 清除CSS:can'；t解决'；样式表/critical.scss'；

我是一名Rails初学者，试图删除页面加载中的阻塞CSS以加快加载速度。我试图创建一个关键的CSS文件来首先加载。它在postsss中使用PurgeCSS过程。我不熟悉Webpacker，所以我不确定应该做什么。我收到以下错误消息：

    ERROR in ./app/javascript/packs/critical.js
    Module not found: Error: Can't resolve 'stylesheets/critical.scss' in '/Users/gustavoborges/code/gustborges/projetos/nufiu/app/javascript/packs'
    @ ./app/javascript/packs/critical.js 1:0-35

app/assets/stylesheets/critical.scss

    // Graphical variables
    @import "config/fonts";
    @import "config/colors";
    
    // External libraries
    @import "bootstrap/scss/bootstrap";
    @import "font-awesome-sprockets";
    @import "font-awesome";
    
    // Your CSS partials
    @import "components/banner";
    @import "components/button";
    @import "components/card";
    @import "components/navbar";
    @import "pages/index";
    
    body {
      background-color: white;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    p {
      color: $light-black;
      -webkit-font-smoothing: antialiased;
    }
    
    a {
      color: $green;
      &:hover {
        color: $coffee;
        text-decoration: underline;
      }
    }
    
    .container-fluid {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
    }
    
    // Whatsapp float
    
    .float {
      position: fixed;
      width: 60px;
      height: 60px;
      bottom: 40px;
      right: 40px;
      background-color: #25d366;
      color: #fff;
      border-radius: 50px;
      text-align: center;
      font-size: 30px;
      box-shadow: 2px 2px 3px #999;
      z-index: 200;
      &:hover {
        color: white;
        background-color: #1cad52;
      }
    }
    
    .my-float {
      margin-top: 16px;
    }

app/assets/javascript/packs/critical.js

    import "stylesheets/critical.scss";

/postsss.config.js（根目录）

你的意思是：

    const environment = ctx => ({
      plugins: [
        require("postcss-import"),
        require("postcss-flexbugs-fixes"),
        require("postcss-preset-env")({
          autoprefixer: {
            flexbox: "no-2009"
          },
          stage: 3
        }),
        purgeCss(ctx)
      ]
    });
    
    const purgeCss = ({ file }) => {
      return require("@fullhuman/postcss-purgecss")({
        content: htmlFilePatterns(file.basename),
        defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
      });
    };
    
    const htmlFilePatterns = filename => {
      switch (filename) {
        case "critical.scss":
          return [
            "./app/views/plants/index.html.erb",
            "./app/views/shared/_navbar.html.erb",
            "./app/views/layouts/application.html.erb"
          ];
        default:
          return [
            "./app/**/*.html.erb",
            "./config/initializers/simple_form_bootstrap.rb",
            "./app/helpers/**/*.rb",
            "./app/javascript/**/*.js"
          ];
      }
    };
    
    module.exports = ctx => environment(ctx);