Основы Scss на Rails 5.2 с Webpacker - PullRequest
Новая
       10

Основы Scss на Rails 5.2 с Webpacker

0 голосов
/ 04 июля 2018

Как настроить Foundation scss и JavaScript в приложении Rails 5.2 с веб-пакером?

Вот что я сделал до сих пор:

Создание нового приложения для рельсов с опцией webpack: 

rails new myapp --webpack

Настройка веб-упаковщика: 

rails webpacker:install

Добавить "Основание для сайтов": 

yarn add jquery foundation-sites

Оттуда я немного заблудился относительно правильных мест для размещения файлов, конфигурации, которую нужно добавить, и куда она должна идти. Я ожидал увидеть где-нибудь файл webpack.config.js. В файле readme я вижу, что есть файл app/javascript/src/application.css. Должен ли я просто начать ссылаться на другие файлы оттуда, и все они будут скомпилированы / объединены вместе?

1 Ответ

0 голосов
/ 06 июля 2018

Положите этот ответ здесь, чтобы другие могли его увидеть. Он в значительной степени основан на ссылке , предоставленной @jdgray.

Создайте новое приложение для рельсов с помощью webpacker: 

rails new myapp --webpack

Вам не нужно запускать rails webpacker:install вручную, как я изначально думал, поскольку он все равно запускается из предыдущей команды.

Перейдите в ваше приложение rails и добавьте Foundation (и jquery, в которых нуждаются плагины): 

yarn add jquery foundation-sites

Это оставит вас с приложением, способным использовать веб-пакет, но на самом деле ничего не используется.

Большая часть вещей окажется в новом каталоге app/javascript, но имеет смысл переименовать его, когда в него добавляется больше, чем просто JavaScript.

Переименуйте его в app/webpack, а затем отредактируйте config/webpacker.yml, чтобы изменить значение default.source_path на app/webpack. Конечно, можно использовать любое имя, но webpack кажется достойным выбором. Этот бит конфигурации будет выглядеть так: 

default: &default
    source_path: app/webpack
    source_entry_path: packs
    public_output_path: packs
    cache_path: tmp/cache/webpacker

Webpacker использует «пакеты» в качестве точек входа для добавления в ваши представления / макеты. В каталоге app/webpack/packs у вас уже должно быть application.js. Создайте файл с именем stylesheets.scss в app/webpack/packs для обработки таблиц стилей. Больше будет добавлено к ним позже.

Затем создайте каталоги app/webpack/src/javascript и app/webpack/src/stylesheets, в которые будут помещаться все ваши обычные javascript и scss-коды.

Чтобы настроить некоторые базовые компоненты, создайте каталог app/webpack/src/stylesheets/foundation_config и создайте в нем файл foundation.scss. Внутри этого файла поместите следующие строки, которые будут ссылаться на фундамент и сделают доступными несколько специфических функций фундамента: 

@import '~foundation-sites/scss/foundation.scss';
@include foundation-global-styles;
@include foundation-grid;

Этот новый foundation.scss файл сам по себе ничего не сделает и должен быть ссылкой на пакет. Добавьте следующую строку в app/webpack/packs/stylesheets.scss: 

@import '../src/stylesheets/foundation_config/foundation'

Теперь у вас есть файл пакета, который загрузит ваш исходный файл, который загружает основу. Последнее, что нужно сделать, это использовать этот файл пакета в макете. В app/views/layouts/application.html.erb добавьте следующую строку в тег head: 

<%= stylesheet_pack_tag 'stylesheets' %>

При всем этом Fondation будет работать через веб-упаковщик. Структура, конечно, также позволит использовать любой другой javascript таблиц стилей, но этот вопрос касался только Foundation, поэтому я остановлюсь здесь. Еще раз спасибо @jdgray!

...