Como lidar com pacotes NodeJS que não ofererecem arquivos com as mesmas tecnologias do seu projeto

[waghcwb]

Já participei de diversos projetos onde precisei importar uma lib que tinha arquivos com extensões diferentes das usadas naqueles projetos.

Vou usar este plugin de range slider como exemplo. Ok?

Os assets de produção que eles fornecem estão em uma estrutura onde o mesmo nome do arquivo .js é o nome do arquivo .css

Sendo assim, se eu estiver em um projeto que usa SASS por exemplo, eu não consigo importar aquele arquivo .css dentro do meu projeto.

Eu só conseguiria caso a extensão do arquivo fosse .scss.

Já me deparei com esse tipo de problema N vezes, o que fiz para resolver foi criar uma task no meu package.json que copiava o arquivo .css e colava como .scss.

Mas isso me parece meio um trampo meio "porco", será que existe uma forma mais "adequada" de resolver esse tipo de problema?

[simaodeveloper]

Provavelmente existe alguma solução para realizar os imports, tem que procurar plugin para webpack, gulp, grunt, vai depender do que vocês está utilizando ou no último caso você terá que criar uma solução.

[waghcwb]

Então..

Eu consigo dar um "bypass" nesse problema porque o projeto que estou trabalhando usa webpack.
import 'nouislider/distribute/nouislider.css'

Mas em casos onde o projeto não usa webpack, o "certo" é fazer o hack para renomear o arquivo de .css para .scss? Abri essa discussão porque isso me parece muito "gambiarra" e queria ver se alguém tem uma idéia melhor.

[bernardodiasc]

Mudar o arquivo de .css pra .scss não parece gambiarra. :)

[klarkc]

Sem usar um transpiler/bundler, dependendo apenas da spec é impossível, pois a spec só suporta import de javascript

Então sem usar webpack, você vai precisar no mínimo de um transpiler para ler o caminho do arquivo e transformar numa função que carrega o arquivo numa variável ou algo semelhante, usando http request no client ou o módulo fs no server