Как импортировать файлы scss из node_modules без тильды? - PullRequest
Новая
       31

Как импортировать файлы scss из node_modules без тильды?

0 голосов
/ 10 октября 2018

Я создал новое приложение rails, используя: 

rails new blah --webpack -T

Затем я добавил учебник 

yarn add primer

Мой импорт работает, если я делаю это в / assets /stylesheets / application.scss

@ import "~ primer / index.scss";

Primer имеет много модулей, поэтому primer / index.scss ссылается на файлы из других модулей.Так что даже если я добавлю тильду в свой первый импорт, это не решит проблему, потому что в других файлах нет тильды.

Но проблема в том, что, как только файл index.scss загружается, появляются другиефайлы, которые перестают работать, потому что они также ссылаются на файлы, такие как: 

// Core modules
@import "primer-base/index.scss";
@import "primer-box/index.scss";
@import "primer-breadcrumb/index.scss";
@import "primer-buttons/index.scss";
@import "primer-table-object/index.scss";
@import "primer-forms/index.scss";
@import "primer-layout/index.scss";
@import "primer-navigation/index.scss";
@import "primer-pagination/index.scss";
@import "primer-tooltips/index.scss";
@import "primer-truncate/index.scss";

Таким образом, этот импорт также должен быть изменен.Мне нужно решить это, поэтому мне не нужно ставить префикс со знаком тильды.Мой assets.rb уже включает в себя node_modules, поэтому я не уверен, что еще я могу сделать?

Мой /initializers/assets.rb имеет это: 

Rails.application.config.assets.paths << Rails.root.join('node_modules')

Еще вмой файл application.scss Я должен включить знак тильды для ссылки на файл scss: 

@import "primer/index.scss";
html {
  font-size: 30px;
}

файл application.js: 

import "./application.scss";

console.log('Hello World from Webpacker2d');

Мой файл макета: 

<!DOCTYPE html>
<html>
  <head>
    <title>Blah</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag    'application' %>
    <%= stylesheet_pack_tag    'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

Не уверен, почему вы хотите импортировать файлы модуля узла отдельно.

Лучший способ использовать это:

npm link my-реагировать-lib

Теперь мы можем создать файл и импортировать эту библиотеку:

vim app / javascript / packs / my-Reaction-component.jsx 

import React from 'react' 
import ReactDOM from 'react-dom' 
import MyReactLib from 'my-react-lib'

document.addEventListener('DOMContentLoaded', () => {   ReactDOM.render(
        <MyReactLib />,
        document.body.appendChild(document.createElement('div')),   ) })

Теперь мы можем просто изменить тег pack, чтобы использовать наш компонент my-реагировать.И обновите наш сервер веб-пакетов. 

<h1>Pages#index</h1> 
<p>Find me in app/views/pages/index.html.erb</p>

<p>Here we will import our React Component using javascript_pack_tag: </p> <%= javascript_pack_tag 'my-react-component' %>

И это работает!

0 голосов
/ 19 октября 2018

Я только что прошел свое простое решение.Поскольку Webpack уже установлен.

Для этого нужно установить Foreman .В основном остальная часть та же самая, за исключением того, что я не использую турболинки с веб-пакетом.

начало мастера -f ./Procfile.dev

# Procfile.dev
web: bundle exec puma -p 3000 -e ${RACK_ENV:-development}
webpacker: ./bin/webpack-dev-server
log: tail -f ./log/development.log
0 голосов
/ 12 октября 2018

Было бы приемлемым решением предварительно обработать все эти файлы для добавления тильды?Если это так, вы можете сделать это для одного файла, например, так: * на компьютере nix: 

cat some_file.scss | ruby -ne 'print $_.sub(/(@import\s*\")([^~])/) { "#{$1}~#{$2}" }' > some_file.scss.tilde
mv some_file.scss.tilde some_file.scss

Для нескольких файлов: 

for file in $(ls *.scss); do
    cat "$file" | ruby -ne 'print $_.sub(/(@import\s*\")([^~])/) { "#{$1}~#{$2}" }' > "$file.tilde"
    mv "$file".tilde "$file"
done

Это заменит ваши файлы scss версиейэто добавляет тильду к любому объявлению @import, в котором его еще нет.Точнее, он соответствует @import, за которым следует любой пробел, за которым следует двойная кавычка, за которой следует что-то, что не является тильдой, и ставит тильду прямо перед тем, что не было тильдой.

Вы можетехотите пропустить строку mv, чтобы сначала проверить вывод.

Если вам пришлось делать это несколько раз, вы можете записать это в задачу или скрипт rake.

...