Ruby почему не подключается css файл
I generated action: bin/rails g controller home index and got error:
I change to application.bootstrap
Got error: cannot load such file -- sassc
Uncomment gem "sassc-rails", "~> 2.1" in Gemfile
Decided to report a issue and return to it after some time.
Rails version: 7.0.0.alpha2
Ruby version: ruby 3.1.0preview1 (2021-11-09 master 5a3b2e6141) [x86_64-linux]
The text was updated successfully, but these errors were encountered:
Not the answer you're looking for? Browse other questions tagged ruby-on-rails css ruby or ask your own question.
Linked
Related
Hot Network Questions
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.5.11.42086
Как использовать CSS с RoR? Когда я связываюсь внешне, я никогда не могу видеть файлы. У меня хп все .css-файл в каждую папку, которую я мог придумать. представления, контроллер, шаблон и ничего не работает.
Что мне нужно сделать, чтобы включить внешние файлы CSS с приложением rails? Я новичок в rails, поэтому простите меня, если это основное.
поместите файлы CSS в общедоступные / таблицы стилей, а затем используйте:
для ссылки на таблицу стилей в ваших макетах или erb-файлах в ваших представлениях.
аналогично вы помещаете изображения в public / images и javascript-файлы в public / javascripts.
Если вы используете rails > 3 версии, то есть концепция под названием asset pipeline . Вы можете добавить свой css в
затем он будет автоматически подхвачен приложение. (это полезно, Так как rails автоматически сжимает файлы css)
подробнее здесь о конвейере активов
Я сделал следующее.
- поместите файл css в .
- добавить ссылку таблицы стилей в файле макетов по умолчанию (скорее всего application.html.erb )
Я рекомендую использовать эту общую папку. Вы также можете ссылаться на таблицу стилей, встроенных, например, в индексе.
используйте тег таблицы стилей rails, чтобы связать свою основную.css, как это
внутри assets.rb добавить следующий фрагмент кода чуть ниже Rails.application.config.assets.version = '1.0'
- поместите любой новый лист .css (или другое) в app/assets/stylesheets
- проверьте свой сервер с rails-root/scripts / rails server, и вы увидите, что ссылка добавлена самим rails.
вы можете проверить это с путем в вашем браузере, как testserverpath: 3000 / assets / filename_to_test.css?тело=1
чтобы добавить к вышесказанному, самое очевидное место для добавления stylesheet_link_tag находится в вашем глобальном приложении-приложении.формат html.Эрб.
вы пытались поместить его в свою общую папку? Всякий раз, когда у меня есть образы или что-то подобное, что мне нужно ссылаться извне, я помещаю все это туда.
I generated action: bin/rails g controller home index and got error:
I change to application.bootstrap
Got error: cannot load such file -- sassc
Uncomment gem "sassc-rails", "~> 2.1" in Gemfile
Decided to report a issue and return to it after some time.
Rails version: 7.0.0.alpha2
Ruby version: ruby 3.1.0preview1 (2021-11-09 master 5a3b2e6141) [x86_64-linux]
The text was updated successfully, but these errors were encountered:
la-ruby commented Jan 22, 2022
then how should we generate the app in rails 7
Кэширование на хостинге или на сайте
Если вы занимаетесь разработкой сайта и вносите какие-то изменения и при этом у вас на сайте установлен какой-то плагин кэширования, убедитесь в том, что данный плагин у вас отключен. Потому, что он так же может кэшировать css-стили. В итоге стили будут написаны правильно, будут применяться, но вы просто не будете видеть изменения, из-за того, что у вас в кэше находится еще старая версия файлов.
owen2345 commented Jan 22, 2022
ro31337 commented Dec 2, 2021 •
yarn build:css --watch says error Command "build:css" not found.
yarn add sass
npm set-script build:css "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map"
(you might need to touch ./app/assets/stylesheets/application.sass.scss if it's not there)
After that yarn build:css seems to work, and there is no error
owen2345 commented Jan 10, 2022 •
Confirmed: When using esbuild or similar, you need to install yarn and npm
And then you need to install or recreate the app again:
ro31337 commented Dec 2, 2021 •
yarn build:css --watch says error Command "build:css" not found.
yarn add sass
npm set-script build:css "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map"
(you might need to touch ./app/assets/stylesheets/application.sass.scss if it's not there)
After that yarn build:css seems to work, and there is no error
owen2345 commented Jan 10, 2022
yarn add sass
npm set-script build:css "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map"
This is strange. Does rails require npm too aside from yarn ?
8 Answers 8
Put the CSS files in public/stylesheets and then use:
to link to the stylesheet in your layouts or erb files in your views.
Similarly you put images in public/images and javascript files in public/javascripts.
Then you can create it add the public folder in the same directory as your app folder. Then add a stylesheets folder within the public folder.
The link tag needs to be in the head part of my document, correct? If I only need the style in one erb partial, is there a way I can conditionally add it when that partial is needed? Or is there a way I can add if the current route matches a specific one?
If you are using rails > 3 version, then there is a concept called asset pipeline . You could add your CSS to
then it will automatically be picked up by the app. (this is useful as rails will automatically compress the CSS files)
read more here about the asset pipeline
Use the rails style sheet tag to link your main.css like this
Once inside the assets.rb add the following code snippet just below the Rails.application.config.assets.version = '1.0'
Restart your server.
This is the correct (more specific) answer per Rails documentation. You must add it to the assets.rb for precompile!
I did the following.
- place your css file in the app/assets/stylesheets folder.
- Add the stylesheet link in your default layouts file (most likely application.html.erb )
I recommend this over using your public folder. You can also reference the stylesheet inline, such as in your index page.
The original post might have been true back in 2009, but now it is actually incorrect now, and no linking is even required for the stylesheet as I see mentioned in some of the other responses. Rails will now do this for you by default.
- Place any new sheet .css (or other) in app/assets/stylesheets
- Test your server with rails-root/scripts/rails server and you'll see the link is added by rails itself.
You can test this with a path in your browser like testserverpath:3000/assets/filename_to_test.css?body=1
Sorry to necropost, but you are just as guilty as I. However, this is not the case at all. If you want to utilize the asset pipeline, and you have properly linked your CSS file in your application.html.haml (or .erb) your server will throw an error, and tell you to add it to the precompile (config/initializers/assets.rb) sorta like so Rails.application.config.assets.precompile += %w( custom.css )
To add to the above, the most obvious place to add stylesheet_link_tag is in your global application layout - application.html.erb.
With Rails 6.0.0, create your "stylesheet.css" stylesheet at app/assets/stylesheets.
Have you tried putting it in your public folder? Whenever I have images or the like that I need to reference externally, I put it all there.
dhh commented Dec 3, 2021
With latest cssbundling-rails, yarn build:css is automatically run once when first generating the app. Ensuring you won't get this missing file error.
But also, you shouldn't generate a Rails 7 app using a Rails 6 rails command.
hamzaasif4981-sudo commented Jan 22, 2022
With latest cssbundling-rails, yarn build:css is automatically run once when first generating the app. Ensuring you won't get this missing file error.
But also, you shouldn't generate a Rails 7 app using a Rails 6 rails command.
then how should we generate the app in rails 7. i am using cssbundling but getting the error.
The asset "application.css" is not present in the asset pipeline.
bbugh commented Jan 30, 2022 •
If anyone else ends up here trying to track down this issue for bootstrap, tailwind, or esbuild, there's two things to note.
but if you've set up both tailwind and esbuild with -j esbuild -c tailwind , this message is incomplete. You need to add two scripts to your package.json :
2. This message also doesn't tell you that you need to run yarn build:css afterwards in order for things to work, so you need to do that at least once. However, there is a generated Procfile.dev so either run those commands individually, or always run Rails in development using foreman start -f Procfile.dev instead of rails s . Then you don't need to run the yarn build:css on its own.
It would be helpful if this was output in a message after creating a new project.
How do I use CSS with RoR? When I link externally, I'm never able to see the files. I cp'd the .css file to every folder I could think of. views, controller, template, and nothing seems to work.
What do I need to do to enable external CSS files with a rails application? I'm new to rails, so forgive me if this is basic.
Не правильно выбранный селектор
Для тех, кто еще не знает, селекторами в css называются та часть кода (те строки), через которые происходит выборка или обращение к тому или иному элементу. Это либо название класса, либо название идентификатора, либо название какого-то html-тега, для которого вы хотите применить определенные стили.
Как же всё таки определить правильно ли вы указали селектор или нет?
Я в таких случаях использую один очень простой прием, который называется задание красной рамки.
К примеру, я хочу изменить стили для блока на сайте.
-
1. Для начала мне нужно вычислить его класс или идентификатор. При помощи инспектирование кода определяю что блок имеет класс site-branding.
HTML-файл не подключается к CSS
Привет, ребята, я просто создаю простую веб-страницу для класса, но по какой-то причине мой html-файл не подключается к моему файлу css, он находится в той же папке и всем остальным. Любая помощь будет оценена.
Во-первых, вы должны правильно структурировать свой HTML. Начнем с удаления вашего файла CSS из заголовка, поскольку он там не работает.
Во-вторых, проверьте структуру папок и убедитесь, что вы следуете правильному пути к файлу CSS.
Тогда, если вы используете код VS. Вы можете просто щелкнуть ! (восклицательный знак), и вы можете выбрать предварительно созданную HTML-страницу, которая поможет вам начать работу с правильной структурой.
Причин может быть несколько:
- Ваш тег "ссылка" не должен находиться внутри тега "заголовок".
- Убедитесь, что ваш файл css находится в том же каталоге, что и файл html, и проверьте, совпадает ли имя файла.
- Проверьте свой файл css
Изменить: только что проверено, и у вас нет элементов с таким идентификатором, убедитесь, что вы видите изменения, внесенные файлом css. Также проверьте консоль разработчика, она очень помогает при отладке.
С этим есть проблемы:
- Тег ссылки не должен входить в тег заголовка. Держите их отдельно, но в голове.
- Атрибут типа в теге ссылки не требуется. Постарайтесь, чтобы все было просто.
- Проверьте имя файла CSS. Может быть иначе.
Вот ваш исправленный код:
Я не уверен, что вы помещаете хэши специально, чтобы ваш код css не генерировал желаемый результат, поэтому я немного очистил ваш код.
Как уже говорили другие ожидает и принимает только обычный текст, поэтому ваша ссылка становится недействительной и отображается как таковая на вкладке вашего браузера.
Хеши для идентификаторов и. для классов, поэтому я удалил их, поскольку в вашем HTML-файле нет идентификаторов. Когда ваш файл.css уже устанавливает фоновое изображение, вам не нужно дважды кодировать его в HTML. Таким образом код выглядит чище и может предотвратить будущие ошибки.
ОТВЕТЫ
Ответ 1
Вы уверены, что таблица стилей загружена? Вы можете увидеть его, используя вкладку "Сеть" Firebug на firefox или на вкладке "Сеть" консоли консоли вашего браузера.
(Если 1 работает), у вас может быть простой стиль образца и посмотреть, будет ли он применяться (и видимым в консоли)?
Ответ 2
Если это не работает, убедитесь, что URL-адрес доступен, а контент — то, что вы ищете.
Ответ 3
Может быть, у вас есть ошибка в вашем файле CSS? Скобка закрыта, отсутствующая точка с запятой и т.д.
Ответ 4
Firefox может отклонить таблицу стилей, если она не подана с типом контента "text/css". (Это отдельно от объявления ‘type="text/css"’ в HTML.)
Ответ 5
У меня была такая же проблема — я изменил текстовую кодировку на UTF-16 в моем индексном файле, и мой файл css будет отображаться пустым, когда я попытаюсь загрузить страницу в браузере. Я понял много проб и ошибок, что ваши html и css файлы должны иметь одинаковую кодировку! Я не знаю, будет ли это работать для вас, но это было для меня.
Ответ 6
Скопируйте URL-адрес файла css и вставьте его в свой браузер. Если он не загружает файл, как вы знаете, проблема находится в URL-адресе.
Ответ 7
I таблица стилей может не загружаться по нескольким причинам. Но основной подход к решению такой проблемы заключается в следующем:
2. Затем вы должны проверить вкладку "Таблицы стилей" и просмотреть список таблиц стилей, загруженных браузером.
3. URL-адрес, который вы используете в своем теге HTML link , может быть недоступным, поэтому вручную попробуйте посетить таблицу стилей с помощью браузера и посмотреть, все ли отображается правильно.
4. Любая опечатка внутри вашей таблицы стилей HTML или CSS может привести к загрузке таблицы стилей.
5. Проверяйте наличие ошибок фатальной ошибки перед тегом . Неустранимая ошибка может остановить исполняемый код и приостановить страницу, не включая таблицу стилей.
Надеюсь, что это поможет.
Ответ 8
Я не думаю, что проблема заключается в том, что вы опубликовали, — нам нужно будет увидеть CSS или проверить его местоположение и т.д.!
Но почему бы не попробовать удалить его до одного правила CSS — поместите его в раздел HEAD, а затем, если он будет работать, переместите это правило во внешний файл. Затем повторите введение других правил, чтобы убедиться, что ничего не пропало или не имеет приоритета над вашим CSS.
Ответ 9
Я очистил всю историю и перезагрузил страницу, тогда моя проблема была исправлена.
Ответ 10
Я столкнулся с той же проблемой, но причина заключалась в том, что стиль в css завернут в идентификатор, который не существует
Я надеюсь, что эта помощь поможет пересмотреть, когда что-то не работает.
Ответ 11
Новый для вас Ребята!
Во время моего процесса Gulp minification
Последний файл CSS был для печати, и сгенерированный вывод дал мне
Итак, из-за media = "print" все правила CSS были пропущены!
Ответ 12
Моя простая мысль, что вы пропустили type="text/css" .
Ответ 13
Ответ 14
Если ваш URL-адрес работает и загружает файл правильно, и вы сказали, что добавление правильного
код не исправляет его, тогда единственная другая проблема заключается в том, что это ошибка в фактическом .css файле. И, чтобы сообщить вам об этом, нам нужно будет увидеть файл.
Что вы можете сделать, это написать один базовый тег в свой HTML, добавить основное правило CSS в существующий файл, а затем посмотреть, можете ли вы повлиять на этот тег с помощью нового правила CSS.
Ответ 15
У меня была такая же проблема, китайские символы появлялись в firefox при загрузке на веб-сервер, но не на localhost. Я скопировал содержимое файла css в новый текстовый файл. Теперь все работает. Должна быть некоторая ошибка в кодировке Unicode/encoding.
Ответ 16
У меня была такая же проблема с тем, что css не работал, позже я узнал, что это мои строки @media в css, которые вызывают проблему.
Я переместил их в конец css, и все было разрешено.
Ответ 17
У меня есть еще один. Я назвал свой файл css: default.css. Он не загрузится. Когда я попытался просмотреть его в браузере, он показал пустую страницу.
Я изменил имя на default_css.css и начал работать.
Ответ 18
У меня была та же проблема, и я использовал кодировку UTF-8 для обоих моих файлов следующим образом:
добавить @charset "UTF-8"; в файле CSS и в в файле HTML. и это сработало для меня.
он делает одинаковую кодировку для обоих файлов, т.е. HTML и CSS.
Вы также можете сделать то же самое для кодировки "UTF-16".
Если он все еще не работает, проверьте наличие в в файле HTML, где следует указать type="text/css"
Ответ 19
Я использую WordPress, и таблица стилей была поставлена в очередь в нижний колонтитул
Это привело к добавлению атрибута media="1" к тегу , в результате чего таблица стилей была загружена, но не применена.
Ошибки в коде
Следующая ситуация, когда стили могут не срабатывать – это ошибки в коде. Особенно это актуально в тех случаях, если вы вносите изменения через встроенный редактор WordPress. Здесь нет подсветки кода и какую-то ошибку в написании того или иного css-свойства очень легко не заметить.
Поэтому для работы с кодом в целом и с css-файлами я рекомендую использовать редакторы кода, в которых есть подсветка этого самого кода. И если вдруг вы какое-то css-свойство напишете не правильно, то у вас он просто не будет подсвечиваться соответствующим цветом, и вы сможете понять, что здесь есть какая-то ошибка.
bbugh commented Jan 30, 2022 •
If anyone else ends up here trying to track down this issue for bootstrap, tailwind, or esbuild, there's two things to note.
but if you've set up both tailwind and esbuild with -j esbuild -c tailwind , this message is incomplete. You need to add two scripts to your package.json :
2. This message also doesn't tell you that you need to run yarn build:css afterwards in order for things to work, so you need to do that at least once. However, there is a generated Procfile.dev so either run those commands individually, or always run Rails in development using foreman start -f Procfile.dev instead of rails s . Then you don't need to run the yarn build:css on its own.
It would be helpful if this was output in a message after creating a new project.
В данной статье мы затронем одну, очень важную проблему, с которой сталкивается практически любой человек, который занимается разработкой или администрированием сайтов.
nleo commented Nov 28, 2021
Didn't try yarn build:css --watch
I switched to bundle exec rails new . -d postgresql -T --edge --css tailwind . With tailwind works ok.
owen2345 commented Jan 10, 2022
yarn add sass
npm set-script build:css "sass ./app/assets/stylesheets/application.sass.scss ./app/assets/builds/application.css --no-source-map"
This is strange. Does rails require npm too aside from yarn ?
Полный список причин, по которым css файл может не работать
Эта проблема заставляет меня чувствовать себя абсолютным noob.
Вот глава моего .html файла:
И мой файл html.css действительно там, где он должен быть. Но у меня совсем нет стиля. Помогите!
И, пожалуйста, не голосуйте, потому что ответ очевиден, и я не вижу его.
РЕДАКТИРОВАТЬ 1
Хорошо, теперь я просто пытаюсь решить проблему локально на своей машине. Вот глава:
РЕДАКТИРОВАТЬ 2
Хорошо, я добился определенного прогресса. Предложение firebug было действительно хорошим. Я видел, что ссылка на файл CSS читается как китайские символы. Это была проблема кодирования UTF, поэтому я просто открыл свои файлы в текстовом редакторе, а затем сохранил их как UTF-16.
Но теперь он считывает неверные данные из файла css! Я загрузил файл css ниже, но в firebug он показывает два лайнера.
Я нахожу это озадачивающим!
nleo commented Nov 28, 2021
Didn't try yarn build:css --watch
I switched to bundle exec rails new . -d postgresql -T --edge --css tailwind . With tailwind works ok.
owen2345 commented Jan 10, 2022 •
Confirmed: When using esbuild or similar, you need to install yarn and npm
And then you need to install or recreate the app again:
la-ruby commented Jan 22, 2022
then how should we generate the app in rails 7
Навигация по статье:
Речь сегодня пойдет о таких ситуациях, когда вы задаете свои css-стили для определенных элементов на вашем сайте, сохраняете все изменения, обновляете страницу и видите, что данные css-стили не применяются. Сегодня мы постараемся разобраться, в чем может быть причина такой проблемы, и как с ней бороться.
hamzaasif4981-sudo commented Jan 22, 2022
With latest cssbundling-rails, yarn build:css is automatically run once when first generating the app. Ensuring you won't get this missing file error.
But also, you shouldn't generate a Rails 7 app using a Rails 6 rails command.
then how should we generate the app in rails 7. i am using cssbundling but getting the error.
The asset "application.css" is not present in the asset pipeline.
nleo commented Nov 28, 2021
nleo commented Nov 28, 2021
Didn't try yarn build:css --watch
I switched to bundle exec rails new . -d postgresql -T --edge --css tailwind . With tailwind works ok.
dhh commented Dec 3, 2021
With latest cssbundling-rails, yarn build:css is automatically run once when first generating the app. Ensuring you won't get this missing file error.
But also, you shouldn't generate a Rails 7 app using a Rails 6 rails command.
Кэширование браузера
Первая причина, по которой внесенные вами изменения могут не применяться может заключаться в банальном кэшировании браузера. Особенно актуально эта проблема проявляется в браузерах Google Chrome.
Дело в том, что этот браузер по умолчанию кэширует все css-стили сайта. Поэтому очень часто, после внесения изменений, при просмотре страницы в браузере Google Chrome нужно либо несколько раз обновить страницу, чтобы изменения вступили в силу, либо очистить кэш браузера.
Кэш браузера здесь очищается следующим образом:
- 1. В правом верхнем углу находим значок с тремя точками и открываем меню настроек Google Chrome
- 2. Находим пункт «История» =>«История»
Во всех других браузерах кэш чистится аналогичным образом.
nleo commented Nov 28, 2021
owen2345 commented Jan 22, 2022
Читайте также: