Importar arquivo CSS regular no arquivo SCSS?

Existe alguma maneira de importar um arquivo CSS regular com o comando @import do Sass? Embora eu não esteja usando toda a syntax SCSS do sass, eu ainda gosto de combinar / compactar resources e gostaria de poder usá-lo sem renomear todos os meus arquivos para * .scss

Parece que isso não é implementado, no momento em que escrevo:

https://github.com/sass/sass/issues/193

Para o libsass (implementação C / C ++), a importação funciona para *.css da mesma maneira que para *.css – apenas omite a extensão:

 @import "path/to/file"; 

Isso importará o path/to/file.css .

Veja esta resposta para mais detalhes.

Veja esta resposta para implementação de Ruby (gem sass)

Depois de ter o mesmo problema, fiquei confuso com todas as respostas aqui e os comentários sobre o repository de sass no github.

Eu só quero salientar que, em dezembro de 2014, esta questão foi resolvida. Agora é possível importar arquivos css diretamente para o seu arquivo sass. O seguinte PR no github resolve o problema.

A syntax é a mesma que agora – @import "your/path/to/the/file" , sem uma extensão após o nome do arquivo. Isso importará seu arquivo diretamente. Se você append *.css no final, ele será convertido na @import url(...) do css @import url(...) .

Caso você esteja usando alguns dos novos bundlers de módulos “extravagantes” como o webpack , você provavelmente precisará usar use ~ no início do caminho. Então, se você quiser importar o seguinte caminho node_modules/bootstrap/src/core.scss você escreveria algo como
@import "~bootstrap/src/core" .

NOTA:
Parece que isso não está funcionando para todos. Se o seu interpretador é baseado no libsass ele deve estar funcionando bem (confira isso ). Eu testei usando @import no node-sass e está funcionando bem. Infelizmente isso funciona e não funciona em algumas instâncias do ruby.

Você deve prefixar um sublinhado ao arquivo css a ser incluído e mudar sua extensão para scss (ex: _yourfile.scss ). Então você só tem que chamar assim:

 @import "yourfile"; 

E includeá o conteúdo do arquivo, em vez de usar a diretiva @import padrão CSS.

Isso foi implementado e mesclado a partir da versão 3.2 ( pull # 754 fundido em 2 de janeiro de 2015 para libsass , os problemas originalmente foram definidos aqui: sass # 193 # 556 , libsass # 318 ).

Para encurtar a longa história, a syntax é a seguinte:

  1. importar (include) o arquivo CSS bruto

    a syntax é sem extensão .css no final (resulta na leitura real de s[ac]ss|css parciais e inclui inline para SCSS / SASS):

    @import "path/to/file";

  2. importar o arquivo CSS de maneira tradicional

    A syntax é feita de maneira tradicional, com a extensão .css no final (resultados para @import url("path/to/file.css"); em seu CSS compilado):

    @import "path/to/file.css";

E é muito bom: essa syntax é elegante e lacônica, além de compatível com versões anteriores! Funciona excelentemente com libsass e node-sass .

__

Para evitar mais especulações nos comentários, escreva isso explicitamente: O Sass baseado em Ruby ainda tem esse recurso não implementado após 7 anos de discussões. No momento em que escrevo esta resposta, prometemos que na @use 4.0 haverá uma maneira simples de conseguir isso, provavelmente com a ajuda do @use . Parece que haverá uma implementação muito em breve, a nova tag “planejada” “Proposta Aceita” foi atribuída para a edição # 556 e o novo recurso @use .

resposta pode ser atualizada, assim que algo muda .

Boas notícias a todos, Chris Eppstein criou um plugin de bússola com a funcionalidade de importação de CSS inline:

https://github.com/chriseppstein/sass-css-importer

Agora, importar um arquivo CSS é tão fácil quanto:

 @import "CSS:library/some_css_file" 

Se você tem um arquivo .css que você não deseja modificar, nem mude sua extensão para .scss ( por exemplo, este arquivo é de um projeto que você não mantém ), você sempre pode criar um symlink e depois importá-lo seus .scss .

Cria um link simbólico:

 ln -s path/to/css/file.css path/to/sass/files/_file.scss 

Importa o arquivo symlink para um destino .scss :

 @import "path/to/sass/files/file"; 

Seu arquivo .css saída de destino armazenará o conteúdo do arquivo .scss symlink importado, não uma regra de importação CSS ( mencionada por @yaz com os maiores votos de comentário ). E você não tem arquivos duplicados com extensões diferentes, o que significa que qualquer atualização feita dentro do arquivo .css inicial é importada imediatamente para sua saída de destino.

O link simbólico (também symlink ou soft link) é um tipo especial de arquivo que contém uma referência a outro arquivo na forma de um caminho absoluto ou relativo e que afeta a resolução do nome do caminho.
http://en.wikipedia.org/wiki/Symbolic_link

Você pode usar um importer terceiros para personalizar a semântica @import .

O node-sass-import-once , que funciona com o node-sass (para o Node.js), pode importar arquivos CSS.

Exemplo de uso direto:

 var sass = require('node-sass');, importOnce = require('node-sass-import-once'); sass.render({ file: "input.scss", importer: importOnce, importOnce: { css: true, } }); 

Exemplo de grunt-sass config:

 var importOnce = require("node-sass-import-once"); grunt.loadNpmTasks("grunt-sass"); grunt.initConfig({ sass: { options: { sourceMap: true, importer: importOnce }, dev: { files: { "dist/style.css": "scss/**/*.scss" } } }); 

Observe que o node-sass-import-once não pode atualmente importar Sass partials sem um sublinhado inicial explícito. Por exemplo, com o arquivo partials/_partial.scss :

  • @import partials/_partial.scss é bem-sucedido
  • @import * partials/partial.scss falha

Em geral, esteja ciente de que um importador personalizado pode alterar qualquer semântica de importação. Leia os documentos antes de começar a usá-lo.

Se eu estou correto css é compatível com scss para que você possa alterar a extensão de um css para scss e deve continuar a trabalhar. Depois de alterar a extensão, você poderá importá-la e ela será incluída no arquivo.

Se você não fizer isso, usará o css @import, algo que você não quer.

Eu descobri uma maneira elegante e estilo Rails de fazer isso. Primeiro, renomeie seu arquivo .scss para .scss.erb , e use uma syntax como essa (exemplo para asset CSS gem highlight_js-rails4 ):

 @import "< %= asset_path("highlight_js/github") %>"; 

Por que você não pode hospedar o arquivo diretamente via SCSS :

Fazer um @import no SCSS funciona bem para arquivos CSS, desde que você use explicitamente o caminho completo de uma forma ou de outra. No modo de desenvolvimento, o rails s serve ativos sem compilá-los, então um caminho como esse funciona …

 @import "highlight_js/github.css"; 

… porque o caminho hospedado é literalmente /assets/highlight_js/github.css . Se você clicar com o botão direito do mouse na página e visualizar a fonte, clique no link da folha de estilo com o @import acima e verá uma linha com a seguinte aparência:

 @import url(highlight_js/github.css); 

O mecanismo do SCSS traduz "highlight_js/github.css" para url(highlight_js/github.css) . Isso funcionará confortavelmente até que você decida tentar executá-lo na produção, em que os resources são pré-compilados com um hash inserido no nome do arquivo. O arquivo SCSS ainda será resolvido para um static /assets/highlight_js/github.css que não foi pré-compilado e não existe na produção.

Como esta solução funciona:

Em primeiro lugar, movendo o arquivo .scss para .scss.erb , transformamos efetivamente o SCSS em um modelo para o Rails. Agora, sempre que usarmos tags de modelo < %= ... %> , o processador de modelo Rails replaceá esses snippets pela saída do código (assim como qualquer outro modelo).

A asset_path("highlight_js/github") no arquivo .scss.erb faz duas coisas:

  1. Aciona os rake assets:precompile do rake assets:precompile tarefa para pré-compilar o arquivo CSS apropriado.
  2. Gera uma URL que reflete adequadamente o ativo, independentemente do ambiente Rails.

Isso também significa que o mecanismo do SCSS não está analisando o arquivo CSS; está apenas hospedando um link para ele! Portanto, não há patches de macaco falsos ou soluções genéricas. Estamos servindo um ativo CSS via SCSS como pretendido, e usando um URL para o dito ativo CSS como o Rails pretendido. Doce!

Solução simples:

Todos, ou quase todos os arquivos css também podem ser interpretados como se fossem scss. Também permite importá-los dentro de um bloco. Renomeie o css para scss e importe-o assim.

Na minha configuração atual eu faço o seguinte:

Primeiro eu copio o arquivo .css para um temporário, dessa vez com extensão .scss. Configuração de exemplo do Grunt:

 copy: { dev: { files: [ { src: "node_modules/some_module/some_precompiled.css", dest: "target/resources/some_module_styles.scss" } ] } } 

Então você pode importar o arquivo .scss do seu pai scss (no meu exemplo, é até importado em um bloco):

 my-selector { @import "target/resources/some_module_styles.scss"; ...other rules... } 

Nota: isso pode ser perigoso, porque resultará efetivamente que o css será analisado várias vezes. Verifique seu CSS original para que ele contenha qualquer artefato interpretável pelo scss (é improvável, mas se acontecer, o resultado será difícil de depurar e perigoso).

No sass 3.5.5 isso está funcionando

@import url (‘yourStyle.css’)

Agora é possível usar:

 @import 'CSS:directory/filename.css'; 

Eu posso confirmar isso funciona:

 class CSSImporter < Sass::Importers::Filesystem def extensions super.merge('css' => :scss) end end view_context = ActionView::Base.new css = Sass::Engine.new( template, syntax: :scss, cache: false, load_paths: Rails.application.assets.paths, read_cache: false, filesystem_importer: CSSImporter # Relevant option, sprockets: { context: view_context, environment: Rails.application.assets } ).render 

Agradecemos a Chriss Epstein: https://github.com/sass/sass/issues/193

Simples.

@import “caminho / para / arquivo.css”;