Importar arquivo CSS regular no arquivo SCSS?

509

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

GSto
fonte
1
Sim, há uma maneira: basta remover extensão' CSS no caminho do arquivo css em @input declaração :) (obras para sass versão> = 3.2)
Kamil Kiełczewski
A partir de 2018, o uso do SASS@import em um arquivo CSS regular deve gerar apenas um CSS @import regular . Isso significa mais uma solicitação HTTP e nenhuma combinação ou compactação. Se algumas implementações se comportarem de maneira diferente, eu diria que é um recurso não padrão que diverge das especificações de idioma.
Álvaro González

Respostas:

215

Parece que isso não foi implementado, no momento em que este artigo foi escrito:

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

Para libsass (implementação C / C ++), a importação funciona *.cssda mesma maneira que para *.scssarquivos - apenas omita a extensão:

@import "path/to/file";

Isso será importado path/to/file.css.

Veja esta resposta para mais detalhes.

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

Stephen Fuhry
fonte
23
@kleinfreund não é verdade com o Sass 3.3.1. A @importinstrução não é alterada e aparece no arquivo CSS resultante. O Sass não inclui o arquivo CSS referenciado como o @GSto está perguntando. Parece que será implementado no Sass 3.4 ou 4.0
fregante 17/05
1
Se você estiver usando Gulp ou Grunt, basta usar uma ferramenta diferente para importar seus arquivos CSS, é mais fácil e funciona agora . Uso gulp-import-css , não sei qual é o equivalente ao Grunt.
Fregante 18/05
3
Funciona com libsasspelo menos. Veja as respostas stackoverflow.com/questions/7111610/… e PR github.com/sass/libsass/pull/754
ivn
"A importação funciona *.cssda mesma maneira que para *.cssarquivos" é uma tautologia. Você queria que um deles estivesse *.scss, certo?
Underscore_d
1
A partir da v3.5.3, a libsass avisa que esse é um comportamento não padrão e não deve ser considerado. (Em vez disso, "Use um importador personalizado para manter esse comportamento.") Github.com/sass/libsass/releases/tag/3.5.3
iX3
383

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

Quero apenas ressaltar que, em dezembro de 2014, esse problema foi resolvido. Agora é possível importar cssarquivos diretamente para o seu arquivo sass. O seguinte PR no github resolve o problema.

A sintaxe é a mesma de agora - @import "your/path/to/the/file", sem uma extensão após o nome do arquivo. Isso importará seu arquivo diretamente. Se você anexar *.cssno final, ele será convertido na cssregra @import url(...).

Caso esteja usando alguns dos novos empacotadores de módulos "sofisticados", como o webpack , você provavelmente precisará usar o uso ~no início do caminho. Portanto, se você deseja importar o caminho a seguir node_modules/bootstrap/src/core.scss, escreva algo parecido
@import "~bootstrap/src/core".

NOTA:
Parece que isso não está funcionando para todos. Se o seu intérprete é baseado em libsassque deve estar funcionando bem (check-out este ). Eu testei usando @importno node-sass e está funcionando bem. Infelizmente, isso funciona e não funciona em algumas instâncias de ruby.

tftd
fonte
1
Isso parece estar implementado, libsassmas ao usar a implementação ruby ​​do sass, parece que essa sintaxe funciona, mas apenas se você sass-css-importerprecisar. Pelo menos é o que estou vendo. Mais alguém pode confirmar isso?
bsara
5
Tem certeza de que possui a versão mais recente do sass? Eu uso essa sintaxe há algum tempo e funciona bem com ambos rubye nodejsintérpretes. Você verificou se não está colocando uma extensão após o nome do arquivo? A sintaxe correta é @import "path/to/style/file(sem a .cssextensão)
tftd
4
Estou usando o ruby ​​sass v3.4.18 (com Jekyll) de acordo com meu Gemfile.lock. Ainda vendo Error: File to import not found or unreadable: cssdep/cssfile. Se eu criar um cssdep/cssfile.scss, de repente funciona. Portanto, não é um problema de caminho, por algum motivo ainda não consigo incluir arquivos '.css' do SASS :(
thom_nic
1
ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)Não trabalhar aqui
Cyril CHAPON
5
Obrigado por isso! Eu era capaz de normalize.css importação usando nó-sass com@import "node_modules/normalize.css/normalize";
Nick
260

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

@import "yourfile";

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

David Morales
fonte
1
Talvez seja algo sobre convenções e padrões.
David Morales #
70
O sublinhado é para impedir que ele seja compilado como um arquivo separado.
Jonah
4
Caso alguém esteja se perguntando, isso funciona porque a sintaxe SCSS do Sass é um superconjunto do CSS3. É também por isso que o ponto e vírgula é necessário.
Jacob Wan
46
Você não pode alterar a extensão de algum arquivo CSS do fornecedor, por exemplo.
Slava Fomin II
7
Se estiver no seu computador / servidor, você pode! E também há links simbólicos, se você não quiser.
ste
260

Isso foi implementado e mesclado a partir da versão 3.2( pull # 754 mesclado 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 sintaxe a seguir:

  1. para importar (incluir) o arquivo CSS bruto

    a sintaxe está sem.css extensão no final (resulta em leitura real parcial s[ac]ss|csse inclui-a em linha com SCSS / SASS):

    @import "path/to/file";

  2. importar o arquivo CSS de uma maneira tradicional

    A sintaxe segue a maneira tradicional, com .cssextensão no final (resulta @import url("path/to/file.css");em seu CSS compilado):

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

E é muito bom: essa sintaxe é elegante e lacônica, além de compatível com versões anteriores! Funciona excelentemente com libsasse 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 escrevemos esta resposta, prometeu-se que na versão 4.0 haveria uma maneira simples de conseguir isso, provavelmente com a ajuda de . Parece que haverá uma implementação muito em breve, a nova tag "planejada" "Proposta Aceita" foi atribuída ao problema nº 556 e ao novo recurso.@use@use

A resposta pode ser atualizada assim que algo mudar .

Farside
fonte
3
só para esclarecer, a importação do css como sass funcionou assim para mim: @import url ("caminho / para / arquivo-sem-css-extensão");
Craig Wayne
1
Na verdade, isso não funciona na versão ruby ​​do sass. Por exemplo, o comando: sass myFile.scss: output.css falha com uma importação de css, mas funciona quando você altera a extensão do arquivo .css para .scss. Execute com a versão mais recente desde a redação deste comentário: 3.4.22 / Steve seletivo. Isso também afeta todos os executores de tarefas que usam a versão ruby, como grunt-contrib-sass.
precisa saber é o seguinte
@ansorensen, acho que há confusão do seu lado. O que você quer dizer com "funciona quando você altera a extensão do arquivo .css para .scss" ? A idéia toda era exatamente sobre arquivos CSS regulares e duas maneiras de trabalhar com eles (não confunda com a importação do SCSS). Por favor, leia mais uma vez a pergunta e a resposta.
Farside
@Farside Sem confusão. A sintaxe de importação 'caminho / para / arquivo' não funciona na versão mais recente da gema sass no Ruby. Quando executo o sass com uma importação, a importação funciona com êxito quando o arquivo no caminho importado possui uma extensão .scss e falha quando o arquivo tem um .css. A pergunta pede uma importação de css para scss, e você fornece uma resposta para lib-sass e node-sass. Estou comentando que essa funcionalidade não está nas versões ruby ​​do sass.
ansorensen
1
@ansorensen, omg, tantos textos seus ... Fui explícito e não confunda ninguém. Node-sassé uma biblioteca Node.js. LibSass (a versão C do Sass). Nem uma única menção que é libsassou node-sassé baseada em Ruby, nem uma única menção sobre a versão do RUBY apenas na pergunta original. Leia com atenção antes de escrever 3 comentários consecutivos da próxima vez. Eu tenho todas as referências: de acordo com o número 193, ele ainda não foi implementado após 5 anos de discussão para a versão Ruby, eles prometem essa funcionalidade somente quando ver. 4.0 estará disponível.
Farside
37

Boas notícias a todos, Chris Eppstein criou um plug-in de bússola com a funcionalidade de importação de CSS embutida:

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

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

@import "CSS:library/some_css_file"
Rafal Pastuszak
fonte
3
Falha devido ao uso do ponto de partida descontinuado. "O que é, mas nunca pode ser ..." Tenho certeza de que foi ótimo quando foi lançado, mas ele precisa de uma atualização para funcionar novamente ou você deve instalar plug-ins obsoletos. Obrigado, C§
CSS
18

Se você possui um .cssarquivo que não deseja modificar, nem mude sua extensão para .scss( por exemplo, esse arquivo é de um projeto bifurcado que você não mantém ), você sempre pode criar um link simbólico e depois importá-lo para o seu .scss.

Cria um link simbólico:

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


Importa o arquivo de link simbólico para um destino .scss:

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


Sua saída alvo .css arquivo de manterá o conteúdo do .scssarquivo de link simbólico importado , não uma regra de importação de CSS ( mencionada por @yaz com os maiores votos para comentários ). E você não possui arquivos duplicados com extensões diferentes, o que significa que qualquer atualização feita dentro do .cssarquivo inicial é importada imediatamente para a saída de destino.

Link simbólico (também link simbólico ou link flexível) é 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

Nik Sumeiko
fonte
9
Adicionando um link simbólico não é uma solução muito portátil (ou seja, vários desenvolvedores ou sistemas de compilação)
LocalPCGuy
@LocalPCGuy, quando ambos os arquivos ( .csse o link simbólico criado) estão disponíveis para todos através de um repositório compartilhado, por exemplo.
Nik Sumeiko
Acabei de fazer isso e ia responder sobre links sym neste tópico, mas feliz por já estar aqui! É verdade que essa necessidade é rara, mas minha situação envolvia não querer modificar o arquivo CSS (porque era um arquivo bower), criando um link simbólico e importando que funcionasse perfeitamente.
Aaron Krauss
2
Para usuários do Windows , a mesma funcionalidade teria uma sintaxe diferente mklink /H <link> <target>e é chamada de link físico @mrsafraz.
Farside 22/03
5

Você pode usar terceiros importerpara personalizar a @importsemântica.

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

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 configuração do grunt-sass :

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 atualmente não pode importar parciais do Sass sem um sublinhado inicial explícito. Por exemplo, com o arquivo partials/_partial.scss:

  • @import partials/_partial.scss consegue
  • @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.

joews
fonte
4

Se eu estiver correto, o css é compatível com o scss, portanto você pode alterar a extensão de um css para scss e ele deve continuar funcionando. Depois de alterar a extensão, você pode importá-la e ela será incluída no arquivo.

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

Pickels
fonte
16
infelizmente, às vezes, os arquivos css importados estão fora de seu controle, como em uma biblioteca que empacota alguns ativos estáticos.
precisa
2

Eu descobri uma maneira elegante e parecida com o Rails de fazer isso. Primeiro, renomeie seu .scssarquivo para .scss.erb, em seguida, use sintaxe como esta (exemplo para o recurso CSS de destaque_js-rails4 gem ):

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

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

Fazer um @importno SCSS funciona bem para arquivos CSS, desde que você use explicitamente o caminho completo de uma maneira ou de outra. No modo de desenvolvimento, rails satende ativos sem compilá-los, portanto, 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 código-fonte" e clicar no link da folha de estilo com as opções acima @import, verá uma linha que se parece com:

@import url(highlight_js/github.css);

O mecanismo SCSS é convertido "highlight_js/github.css"em url(highlight_js/github.css). Isso funcionará muito bem até você decidir executá-lo na produção em que os ativos são pré-compilados com um hash injetado no nome do arquivo. O arquivo SCSS ainda resolverá uma estática /assets/highlight_js/github.cssque não foi pré-compilada e não existe na produção.

Como esta solução funciona:

Primeiramente, movendo o .scssarquivo para .scss.erb, transformamos efetivamente o SCSS em um modelo para o Rails. Agora, sempre que usamos<%= ... %> tags de modelo, o processador de modelo do Rails substituirá esses trechos pela saída do código (como qualquer outro modelo).

A indicação asset_path("highlight_js/github")no .scss.erbarquivo faz duas coisas:

  1. Dispara a rake assets:precompiletarefa para pré-compilar o arquivo CSS apropriado.
  2. Gera uma URL que reflete adequadamente o ativo, independentemente do ambiente do Rails.

Isso também significa que o mecanismo SCSS nem está analisando o arquivo CSS; está apenas hospedando um link para ele! Portanto, não há patches de macaco hokey ou soluções grosseiras. Estamos servindo um recurso CSS via SCSS, conforme pretendido, e usando um URL para o referido recurso CSS conforme o Rails. Doce!

Synthead
fonte
Para mim, a solução parece um pouco sombria e soa mais como um hack. Mas é um bom trabalho de investigação!
Farside
0

Solução simples:

Todo ou quase todo arquivo css também pode ser interpretado como se fosse scss. Também permite importá-los dentro de um bloco. Renomeie o css para scss e importe-o.

Na minha configuração real, faço o seguinte:

Primeiro, copio o arquivo .css para um temporário, desta vez com a extensão .scss. Exemplo de configuração 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, ele é importado para 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 se o css original contém algum artefato interpretável por scss (é improvável, mas se acontecer, o resultado será difícil de depurar e perigoso).

peterh - Restabelecer Monica
fonte
-3

Agora é possível usar:

@import 'CSS:directory/filename.css';
Shlomi Schwartz
fonte
3
somente se gem sass-css-importerestá instalado, sass é chamado com interruptor -r sass-css-importere .cssé omitido do caminho do arquivo
Bernhard Dobler
-4

Posso confirmar que 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

Crédito para Chriss Epstein: https://github.com/sass/sass/issues/193

Macario
fonte
1
Como você pode usar isso no seu arquivo scss?
Adrian Ber
-10

Simples.

@import "caminho / para / file.css";

Adam Stacoviak
fonte
6
Eu tentei isso, mas ele não puxa o conteúdo do arquivo para aquele ao compactá-lo, apenas manterá a linha @import.
precisa saber é o seguinte
1
Resposta com pontuação mais baixa, mas, ironicamente, este parece ser o caminho certo agora. Incluir o sufixo é a coisa certa a fazer.
Wyck