Importar arquivo CSS regular no arquivo SCSS?

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

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)

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.

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.

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 .

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"

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

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.

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.

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!

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).

Agora é possível usar:

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

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

Simples.

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