sass-rails 相关问题


Node Sass 版本 9.0.0 与 ^4.0.0 不兼容

我的应用程序中没有安装node-sass或sass包。但我一直收到这个错误 ./src/scss/styles.scss 中的错误(./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plu...


警告:在 calc() 之外使用 / 进行除法已被弃用,并将在 Dart Sass 2.0.0 中删除

在我更新了 Angular 应用程序并更新了 Sass 编译器后,我开始收到此错误 $val: 100px; .some-选择器{ 填充:$val/2; } 警告:使用 / 来除...


如何在 Rails 7 esbuild 应用程序中显示 Bootstrap 5.3 弹出窗口?

当我使用 Bootstrap 创建全新的 Rails 7 应用程序时,Modals 可以开箱即用,但 Popover 则不然。我如何让他们工作? Rails 7.1.2、esbuild、Bootstrap 5.3.2: Rails 新 -- 数据库 sqlite3 --


带有 --css bootstrap 的 Rails 7 新应用程序 - Turbo 按钮不起作用

使用 Rails new myapp --css bootstrap 创建新应用程序 Rails 7 时,我的涡轮按钮将不起作用: =button_to“退出”,edit_post_path,方法::删除,形式:{数据:{turbo_confirm:“...


Turbolinks 与 Rails v7+ 兼容吗?

我们正在致力于将 Rails 从 v6.1 升级到 v7.0,我们正在使用 Turbolinks,并且我们知道 Rails 7 现在在 Hotwire 中具有 Turbo。我没有看到 Turbolinks gem 有任何贬值,但仍然很好奇......


如何在 Laravel 中添加外部 scss 文件?

我从Colorlib购买了一个主题,Bootstrap Sidebar V02,包含SCSS文件。将这个外部 SCSS 文件添加到 Laravel 项目的相关方法是什么? mix.sass('资源/sass/样式。


带有动态变量的 SCSS 主题

大家好! 我目前正在开发 CSS 框架的主题功能,并遇到了一些问题,希望您能够帮助解决。 我创建了一个名为 $themes 的 SASS 地图,...


是否可以从Rails应用程序中访问DataDog trace_id

我们在 Rails 应用程序中使用 DataDog 的分布式跟踪,并希望写入trace_id(对于控制器#action),以便我们稍后可以访问 Rails 日志中的 url。我怎么能...


当你对javascript进行更改时,rails importmap-rails 中是否有自动编译器? (就像在 webpacker 或 esbuild 中一样)

我有一个新的rails项目,默认情况下有一个导入映射。 为了更新我的更改,我需要每次输入 Rails 资产:预编译 但我知道在 webpacker 中他们会用你的 c 重新编译...


Rails 7:导入 javascript 而不使用 importmap

我阅读了如何将自定义 JS 文件添加到新的 Rails 7 项目,并编写了 Rails 7:如何添加自定义 javascript 函数? 我想现在我已经清楚了。 我不想加载模块。我只是想...


如何在Rails中保存完整的html页面

我正在尝试使用 Rails 4 应用程序将网页保存到磁盘 send_data(render_to_string, :filename => "foo.html"). 文件保存正常,但是缺少 css。 我尝试添加...


Rails 错误:ActionDispatch::Cookies::CookieOverflow

我看到堆栈溢出上有多个关于此主题的帖子,但无法应用它们。 我的应用程序中出现了一个我不明白的 Rails 错误:“ActionDispatch::Cookies::CookieOverflow&qu...


Rails 6 Action 邮箱和 Gmail 集成方法

Rails 6 现在附带了 Action Mailbox。文档和社区没有关于如何集成 SendGrid 等最常见服务之外的各种服务的丰富资源。 假设一个人...


Rails 应用程序中的 Stripe Checkout 和刺激控制器问题

我在 Rails 应用程序中渲染 Stripe Checkout 和连接 Stimulus 控制器时遇到问题。我概述了以下详细信息: Stripe Checkout 组件未渲染...


如何为物理治疗师定义这个 Rails 应用程序的模型关系?

我是 Ruby on Rails 初学者,正在尝试构建我的第一个现实生活中的 Rails 应用程序。 想法如下: 该应用程序显示了练习的概述。每个练习都有一个类别:字符串,身体部位:字符串,


在 Rails 7 应用程序中使用 bootstrap javascript

我有一个正在运行的 Rails 7 应用程序,它使用 esbuild 作为 JS 捆绑器并导入了 bootstrap。 我正在尝试弄清楚如何访问主“外部”的任何 Bootstrap Javascript 功能


Chartkick + Rails 7 (Turbo) + Heroku

我有一个使用 Turbo 的 Rails 7 应用程序。我使用 Chartkick (+ Chart.js) 并在我的页面上放置了一些图表。 在我的本地设置中,一切正常,但部署到 Heroku 后,我遇到了一个奇怪的问题。 当我


Bootstrap 无法与 Rails 正确配合使用

大家好 我使用这个入门模板启动一个新的 Rails 应用程序,当我从 bootstrap 添加一个简单的导航栏时。 它看起来像这样 主要问题是JS不起作用,下拉菜单我...


带有 JS 模块模式的 Rails 导入映射错误:“net::ERR_ABORTED 404(未找到)”

我正在使用 Importmap for Rails 7 实现 JavaScript 模块模式,并且遇到与在生产环境中加载自定义帮助程序 JS 文件相关的错误。 我的应用程序/javascript 有一个


使用 ruby 3.2 部署的 GCP App Engine Rails 应用程序向 foreman start 添加参数,然后失败

我正在使用 google cloud build 来部署我的 Rails 应用程序。最近我将 ruby 版本升级到了 3.2。我使用 foreman 作为 app.yaml 中的入口点(不带参数)并添加了


Rails 开发环境即使在重新启动服务器后也不会更新 html/css/assets

我一直在rails中开发一个网站,一切都进行得相对顺利。突然我对视图和资产的更改不再显示。我更改样式表或一些 html 并重新加载我的浏览器...


Helper 方法不渲染任何列表项

在 Rails 7 中,为什么以下助手不渲染列表项? def 列表(选项) tag.ul(类:“a”)做 options.each 做 |option| tag.li(类:“b”)做 他...


如何通过Sequel查询返回所有Dataset

Rails 作用域返回 all(ActiveRecord::Relation) 而不是 nil。 这样我就可以在条件为零时使用方法链。 类 MyClass < ApplicationRecord scope :my_filter, ->(条件){ 其中(


Rails 3中ActiveRecord选择一个具有一定长度的字符串字段?

我有一系列帖子,想选择标题大小小于 30 的所有帖子,该怎么做? Posts.where("len(标题) < 30")?


Rails Rspec 测试路由使用的 lib 类包含私有方法

Simplecov 检测到我缺少对 lib/api_verson.rb 类的一些测试: 类 ApiVersion def 初始化(版本) @版本=版本 结尾 def 匹配?(请求)


Ruby on Rails 条件渲染不起作用

这是我的考勤控制器中mark_attendance方法的一部分。该方法在扫描二维码后调用,如果 my_student_course.size > 1,则应显示模式。 `如果讲师


Canvas lms 捆绑执行rails db:initial_setup 错误

我正在尝试在 Debian 上安装 canvas lms,但在名为“数据库填充”的步骤中(这是一个教程:(https://github.com/instruct/canvas-lms/wiki/Quick-Start),当我使用通讯...


在 Ruby On Rails 中出现“堆栈级别太深错误”

当我在index.html.erb中调用vendor.account_owner时,出现堆栈级别太深错误 供应商迁移文件如下所示 创建供应商类 < ActiveRecord::Migration[7.0] def change...


Rubocop 自动更正 FrozenStringLiteralComment 不起作用

我有一个 Rails 6 项目,并尝试使用 RuboCop 的自动更正选项来修复许多 Style/FrozenStringLiteralComment 错误(主要在生成的文件中)。 无论我运行bundl多少次...


寻找独立的命令行代码生成器脚本

我正在寻找一个库或命令行脚本,它允许我创建可以从命令行生成的自定义模板。 ruby on Rails 脚手架生成器几乎相同......


如何按名称对@users.person.name进行排序? (Ruby on Rails)

我正在尝试按名称字母顺序对@users进行排序。我该怎么做呢? @用户.person.name 编辑: 我是这样解决这个问题的: @用户.sort! { |a,b| a.person.name <=> b.person.name } 谢谢你...


在Rails中,如果枚举有空格,有没有办法访问其查询快捷方法?

我有一个带有名为“status”的枚举属性的模型。其中一个值(“进行中”)有一个空格。 班级游戏 < ApplicationRecord enum status: [:scheduled, :"in pro...


导轨 |使用嵌套属性作为多态关联的外部类型?

在Rails中,我想构建我的模型,以便主记录(我们称之为Shipment)有一个详细记录(基本类型:ShipmentDetail),它是多态的,这样数据的结构...


如何测试控制器实例变量中的属性值?

我正在使用rails 5 和minitest。我想知道如何测试控制器方法的实例变量中的字段值。我意识到如果我想测试变量是否已定义,我...


如何以可视方式连接到反向代理后面的 MySql?

在 Rails Kamal-Docker 出现之前,我习惯使用 MySql Workbench 从本地计算机连接到远程 MySql 生产数据库。现在我已将数据库放置在远程服务器上


heroku 部署上未显示输入类型复选框

我在 Heroku 上部署时遇到问题。我正在使用 Rails 4 和 postgresql。 以下代码在我的本地版本中运行良好,但在部署的版本中根本没有出现。所有其他


Rails 使用符号与字符串作为参数哈希中的键

如果我们使用字符串作为哈希键,Ruby 需要评估该字符串并查看其内容(并计算其哈希函数),并将结果与键的(哈希)值进行比较...


将新管理员添加到活动管理员

我正在为我的用户使用设备。我最近安装了 Rails Active Admin gem,一切都运行良好。 但是我不知道如何添加新的管理员用户。我可以看到那个活跃的...


Javascript 在开发模式下通过资产管道进行缓存

我最近将我的应用程序升级到了 Rails 3.1,通常一切似乎都正常,但有一件事让我发疯。 我有 2 个主要的 js 文件,我们称它们为 application.js 和 main.j...


wkhtmltopdf 文档在开发与生产中的生成方式不同

以下用于生成 PDF 的布局设置为使用 Rails 应用程序的 asset/public 目录中的 css 文件,因为 wicked-pdf gem 需要静态链接。它会根据每个环境进行调整...


fields_for 和accepts_nested_attributes_for

我注意到一些奇怪的事情。因为我有一个具有用户模型的 Rails 应用程序。 用户拥有一个实验室 实验室属于用户。 用户有两个属性,用户名和年龄。 创建时必须输入用户名...


如何在 Ruby on Rails 中获取 slug 并将其用作页面的主体类?

我是 Ruby 新手,我有一个项目,我确实需要页面具有唯一的类/ID。这样的话,躺着就非常方便了。 网站上的每个页面都有一个 slug。喜欢 www.site.com/page-


在 Rails 迁移中添加日期和时间字段

我正在尝试创建一个事件,该事件有一个日期和一个时间字段。在创建抗议表时,我没有添加时间字段,因此我必须运行迁移来添加时间字段。但我现在哈...


创建包含轨道模型的 gem

我已经阅读了很多有关该主题的文章,但似乎没有什么能完全满足我的需求。如果我重复或不清楚某些事情,我很抱歉,因为我既是 ruby 和 Rails 的新手,也是 Stack Overflow 的新手。 我有...


确定当前太平洋时区是 PST 还是 PDT

我们有一些 Ruby(在 Rails 上下文中)可以将表示的时间整数解析为日期时间,并且我们需要确保将日期时间解析为太平洋时间: 日期时间.new(2012, 11, 17, 3, 2, 0, '太平洋标准时间')


Jekyll kramdown:如何禁用在表格中生成样式?

我有带有标准 Markdown 表的 Markdown 文件: | AAA | BBB | |:---:|:---:| | 1 | 2 | | 3 | 4 | Jekyll 渲染得很好,但添加了 text-align: center; td 的风格: ... 我有带有标准 Markdown 表的 Markdown 文件: | AAA | BBB | |:---:|:---:| | 1 | 2 | | 3 | 4 | Jekyll 渲染得很好,但在 text-align: center; 的风格中添加了 td: <table> <thead> <tr> <th style="text-align: center">AAA</th> <th style="text-align: center">BBB</th> </tr> </thead> <tbody> <tr> <td style="text-align: center">1</td> <td style="text-align: center">2</td> </tr> <tr> <td style="text-align: center">3</td> <td style="text-align: center">4</td> </tr> </tbody> </table> 如何禁用此功能,以便 jekyll 不向表格元素添加任何样式? 谢谢你的帮助 我有 Jekyll 4.3.2,这是我的 _config.yml 的内容: highlighter: rouge markdown: kramdown kramdown: extensions: - Hard_wrap - no_intra_emphasis - strikethrough - fenced_code_blocks - autolink - with_toc_data - highlight - footnotes input: GFM sass: style: :compressed permalink: "/:title/" slugify: "pretty" 解决方案是从 hrader 分隔符中删除冒号: | AAA | BBB | |-----|-----| | 1 | 2 | | 3 | 4 |


了解 Ruby 版本控制冲突:揭开 Net::ProtocRetryError 和 Net::BufferedIO::BUFSIZE 警告

每次我工作时,当我尝试启动任何像mailcatcher这样的gem,启动我的服务器或运行命令rails c时,我都会看到此错误消息,但我不知道为什么它看起来像是某种错误版本...


在发布为 npm 包之前使用 npm 链接测试组件时出现重复的 ReactJS 导入问题

我有一个像这样的简单组件。 从'react'导入React,{useState}; 函数 MyComponentWithState(props) { const [值,setValue] = useState(0); 返回 ( 我的价值... 我有一个像这样的简单组件。 import React, {useState} from 'react'; function MyComponentWithState(props) { const [value, setValue] = useState(0); return ( <p>My value is: {value}</p> ) } export default MyComponentWithState; 我想将它作为单独的包发布在 NPM 上。因此,为此我准备了 package.json 和 webpack.config.js,如下所示。 package.json: { "name": "try-to-publish", "version": "0.0.1", "description": "Just a test", "main": "build/index.js", "scripts": { "start": "webpack --watch", "build": "webpack" }, "author": { "name": "Behnam Azimi" }, "license": "ISC", "peerDependencies": { "react": "16.9.0", "react-dom": "16.9.0" }, "dependencies": { "react": "16.9.0", "react-dom": "16.9.0", "prop-types": "15.7.2", "react-scripts": "3.1.1", "webpack": "4.39.3" }, "devDependencies": { "@babel/core": "7.6.0", "@babel/plugin-proposal-class-properties": "7.5.5", "@babel/preset-env": "7.6.0", "@babel/preset-react": "7.0.0", "babel-loader": "8.0.6", "babel-plugin-transform-object-rest-spread": "6.26.0", "babel-plugin-transform-react-jsx": "6.24.1", "css-loader": "3.2.0", "node-sass": "4.12.0", "sass-loader": "8.0.0", "style-loader": "1.0.0", "webpack-cli": "3.3.8", "webpack-external-react": "^1.1.2" } } webpack.config.json: const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'index.js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, include: path.resolve(__dirname, 'src'), use: { loader: "babel-loader" } }, ] }, resolve: { alias: { 'react': path.resolve(__dirname, 'node_modules/react'), 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), } }, externals: { 'react': "commonjs react", 'react-dom': "commonjs react-dom" }, }; 这是我的 .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": ["@babel/plugin-proposal-class-properties"] } 当我将组件发布到 NPM 并使用 `npm install 将其安装到我的另一个 ReactJs 项目中时,这些配置就像魅力一样,但我的观点是本地测试! 我想在发布之前测试这个组件/库。为此,我使用 npm link 功能将我的组件与我的主 ReactJS 项目链接起来。 正如您在上面看到的,我的组件是功能性的,我也使用了钩子。因此,当我将本地链接的库注入到我的主 ReactJs 项目中时,会遇到此错误, 无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一: 1.您的React和渲染器版本可能不匹配(例如React DOM) 2. 你可能违反了 Hooks 规则 3. 您可能在同一个应用程序中拥有多个 React 副本 我的问题与第三个原因有关。我的项目使用 ReactJs 并导入一次,我的组件也会导入 React!我的意思是在一个项目中两次 React 导入!. 我的 Webpack 配置中还有关于 react 和 react-dom 的 externals 配置。 我应该怎么做才能解决这个问题?我的错误在哪里? 更新: 我也尝试过 @sung-m-kim 和 @eddie-cooro 所说的,但没有成功!意思是,我更改了 package.json 并从 react 中删除了 react-dom 和 dependencies 并将它们添加到 devDpendencies。 我终于通过这些步骤解决了这个问题。 运行npm链接里面 <your-library-package>/node_modules/react 还有 运行npm链接里面 <your-library-package>/node_modules/react-dom 然后在 应用程序根目录中运行 npm link react 和 npm link react-dom 并且不要忘记将 React 和 React-dom 作为库中的外部对象保留 // webpack.config.js const externals = { "react": "react", "react-dom": "react-dom", } module.exports = { . . . externals } 我解决了我的问题。我使用 RollupJS 而不是 Webpack 作为捆绑工具进行捆绑。 这是我的rollup.config.js: import {uglify} from 'rollup-plugin-uglify' import babel from 'rollup-plugin-babel' export default { input: "./src/index.js", external: ['react', 'react-dom'], output: { name: 'test-lib', format: "cjs", }, plugins: [ babel({ exclude: "node_modules/**" }), uglify(), ], }; 和我的package.json: { "name": "test-lib", "version": "1.0.0", "main": "dist/test-lib.min.js", "scripts": { "build": "rollup -c -o dist/test-lib.min.js" }, "author": "Behnam Azimi", "license": "ISC", "peerDependencies": { "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", "rollup": "^1.21.4", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-uglify": "^6.0.3" } } 经过这些更改,npm link在我的ReactJS(Hooks)项目中真正发挥了作用。 请注意,这只是一个简单的 Rollup 配置来展示我的解决方案,您可以在配置中添加多种内容,例如热重载、样式加载器和许多其他插件。 仅在 package.json 的 react 部分(而不是 react-native)内设置 peerDependencies 和 dependencies 包。另外,对于本地开发(当您的包未包含在任何其他 React 项目中并且您想在本地运行它时),您可以使用 devDependencies 字段。 我在打字稿反应项目中解决了这个问题。 可能,当使用 npm link 时,请使用主应用程序项目和组件项目中的 react。 因此,在您的 package.json 中从 react 和/或 dependencies 中删除 devDependencies 检查答案:https://stackoverflow.com/a/62807950/5183591 我也有同样的问题。 就我而言,我开发了一些 UI 组件作为包,其中有一个包含 React 应用程序的示例文件夹,用于创建 React 应用程序。 问题是,当我使用 npm i ../ 将包安装到示例应用程序中时,它会将包中的所有文件安装到示例应用程序中,包括 node_modules 文件夹。由于我已经安装了 react 和 react-dom 作为对等依赖项,示例应用程序现在有两个不同的 React 副本。 从包中删除 node_module 文件夹并重新安装包再次解决了我的问题。


在 Rails 5 中单击浏览器上的后退按钮时,带有 Select2 的表单会重复

_header.html.erb(用于表单部分) <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> _header.html.erb(用于表单部分) <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> <div class="form-group" style="display:inline;"> <div class="input-group input-group-md"> <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %> <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %> <%if logged_in? %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %> <% else %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %> <% end %> <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span> </div> </div> <% end %> JS代码 <script> $( document ).on('turbolinks:load', function() { $('select#category').select2({ width: '60%', dropdownAutoWidth : true, placeholder: "Choose a category", maximumSelectionLength: 3 }); $('select#location').select2({ width: '40%', dropdownAutoWidth : true, minimumResultsForSearch: Infinity }); }); </script> 故障或渲染问题(单击链接查看图像) 有人可以帮我解决为什么吗?另外,我的搜索表单位于标题部分文件的导航栏中。 如果我去掉脚本中的 $(...).select ,一切都会正常...我认为 select.js 有问题 在此回复: https://stackoverflow.com/a/41915129/5758027 我在自己的代码中使用了这个解决方案: $(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button. $('.select-select2').select2('destroy'); $('.select-search-select2').select2('destroy'); } ); 和观察者: $(document).ready( ready ); //... once document ready $(document).ajaxComplete( ready ); //... once ajax is complete $(document).on('turbolinks:load', ready ); //... once a link is clicked function ready() { $(".select-search-select2").select2({ theme: "bootstrap", language: 'es', allowClear: true }); $(".select-select2").select2({ theme: "bootstrap", language: 'es', minimumResultsForSearch: Infinity, allowClear: true }); }; 总是清除缓存不是会让使用 Turbolink 变得毫无意义吗? 不如这样? $(document).on('turbolinks:before-cache', function(e) { return $('.form-control.select2').each(function() { return $(this).select2('destroy'); }); }); 我无法解决这个渲染问题(仍在等待正确的答案!),但如果有人像我一样遇到类似的问题,请尝试跳出框框思考。这是我的技巧:我在应用程序中添加了一个后退按钮。 获取完整的url路径 # get the previous url def save_previous_page session[:return_to] = request.fullpath end 仅当页面不是主页或搜索页面时才显示后退按钮 <% if session[:return_to] != request.fullpath%> <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <%end%> <% end %> 同时,我仍在等待并尝试解决渲染问题... 解决了问题 只需将此代码添加到您的 .js 文件中 Turbolinks.clearCache(); 这很可能是一些资源不一致,您应该检查您的 app\views\layouts 文件夹中是否有重复声明 wither jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签,以及是否在 layout 文件夹和内部视图中声明相同的脚本。如果情况并非如此,请检查是否有 render、yield 或 build 呼叫 简单的解决方案,不要在您不希望它运行的东西上运行 select2 构建器。 $("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2(); Rails 7 更新 这里的很多东西在 Rails 7 中都不起作用,尤其是 turbolinks:before-cache 事件。您正在寻找的新事件是 turbo:before-cache 和 turbo:load,所以它看起来像这样: $(document).on("turbo:before-cache", function() { $("#select_id").select2('destroy'); }); $(document).on('turbo:load', function() { $('#select_id').select2(); });


© www.soinside.com 2019 - 2024. All rights reserved.