现有Rails项目安装cssbundling-rails后如何引用原有scss资源

核心原因 #

安装cssbundling-rails后，样式编译的默认职责已从原有的Sprockets（Asset Pipeline）移交到Node.js构建工具链，原有application.css里的自动引用规则被删除后，旧的.scss文件不会被自动纳入构建流程，且Tailwind默认的构建管道仅处理纯css入口，不识别scss导入语法，所以出现原有样式失效的问题。

可选配置方案 #

方案1：保留Sprockets编译能力（无需改动原有样式文件） #

适合不想调整原有scss文件结构，短期兼容旧代码的场景

• 在app/assets/stylesheets目录下新建custom.scss文件，添加原有自动引用规则：

/*
 *= require_tree .
 *= require_self
 */

• 调整布局文件app/views/layouts/application.html.erb的样式引用，新增custom样式入口：

<%= stylesheet_link_tag 'application', 'custom', 'data-turbo-track': 'reload' %>

• 打开app/assets/config/manifest.js，添加custom.css的编译声明：

//= link custom.css

重启./bin/dev即可生效，原有scss仍走Sprockets编译，和cssbundling输出的Tailwind样式并行加载。

方案2：将原有scss纳入Node构建流程（推荐长期使用） #

适合后续完全用Node工具链统一管理所有样式的场景

• 先安装sass编译依赖：

npm install sass --save-dev

• 将原有application.tailwind.css重命名为application.tailwind.scss，让构建工具识别scss语法
• 在application.tailwind.scss顶部按相对路径引入需要的旧scss文件，保留原有的Tailwind指令：

// 引入同目录下的post.scss，其他scss文件可按路径依次导入
@import './post.scss';

@tailwind base;
@tailwind components;
@tailwind utilities;

• 打开根目录package.json，修改build:css脚本的入口文件后缀：

{
  "scripts": {
    // 仅修改-i参数后的入口文件后缀，其他参数保持不变
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.scss -o ./app/assets/builds/application.css --minify"
  }
}

重启./bin/dev即可，所有导入的scss会被自动编译合并到最终的构建产物中。

之前方案失效原因说明 #

• 仅在manifest.js中添加引用：没有在布局文件中引入对应编译后的css文件，浏览器不会加载对应资源
• 在css后缀的application.tailwind.css中添加scss导入：Tailwind默认构建管道不支持解析scss导入语法，导入规则会被直接忽略

内容的提问来源于stack exchange，提问作者computer_smile