scss - Al usar SASS, ¿cómo puedo importar un archivo desde un directorio diferente?

sass[]

Question

En SASS, ¿es posible importar un archivo de otro directorio? Por ejemplo, si tuviera una estructura como esta:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss podría importar _common.scss usando @import "common" pero ¿es posible que more_styles.scss importe _common.scss? @import "../sub_directory_a/common" algunas cosas diferentes, entre ellas @import "../sub_directory_a/common" y @import "../sub_directory_a/_common.scss" pero nada parece funcionar.

Answer 1

En realidad, solo necesita hacerlo sin "../" y agregue "_" al archivo que se está importando

En template.scss:

@import "sub_directory_b/_more_styles.scss"

Y cambie more_styles.scss por _more_styles.scss

Answer 2

Examine el uso del parámetro includePaths ...

"El compilador SASS usa cada ruta en loadPaths cuando resuelve SASS @imports".

https://.com/a/33588202/384884

Answer 3

Gulp hará el trabajo de ver tus archivos sass y también agregar rutas de otros archivos con includePaths. ejemplo:

gulp.task(''sass'', function() {
  return gulp.src(''scss/app.scss'')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest(''css''));
});

Answer 4

La importación de un archivo .scss que tenga una importación anidada con una posición relativa diferente no funcionará. La mejor respuesta propuesta (usando mucho ../ ) es solo un truco sucio que funcionará siempre y cuando haya agregado suficiente .../ para llegar a la raíz del sistema operativo de implementación de su proyecto.

1. Agregue la ruta SCSS de destino como un objetivo de búsqueda para el compilador SCSS. Esto se puede lograr agregando la carpeta de hojas de estilo en el archivo de configuración scss, esto es función del marco de trabajo que está usando,

use :load_paths en config.rd para frameworks basados ​​en brújula (Ex. rails)

use el siguiente código en scss-config.json for fourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. Use rutas absolutas (vs. rutas relativas).

Ejemplo, con fourseven/meteor-scss , puede usar {} para resaltar el nivel superior de su proyecto según el siguiente ejemplo

@import "{}/node_modules/module-name/stylesheet";

Answer 5

La respuesta seleccionada no ofrece una solución viable.

La práctica de OP parece irregular. Un archivo compartido / común normalmente vive bajo partials , un directorio repetitivo estándar. A continuación, debe agregar el directorio de partials a sus rutas de importación de config para resolver parciales en cualquier parte de su código.

Cuando me encontré con este problema por primera vez, calculé que SASS probablemente le da una variable global similar al nombre de nodo de __dirname , que mantiene una ruta de acceso absoluta al directorio de trabajo actual ( cwd ). Lamentablemente, no es así y la razón es porque la interpolación en una directiva @import no es posible, por lo tanto, no puede hacer una ruta de importación dinámica.

De acuerdo con los documentos SASS .

Necesitas configurar :load_paths en tu configuración de Sass. Como OP usa Compass, lo seguiré de acuerdo con la documentación here .

Puede ir con la solución CLI como lo propuso, pero ¿por qué? es mucho más conveniente agregarlo a config.rb . Tendría sentido usar CLI para anular config.rb (por ejemplo, diferentes escenarios de compilación).

Entonces, suponiendo que su config.rb está bajo la raíz del proyecto, simplemente agregue la siguiente línea: add_import_path ''sub_directory_a''

Y ahora @import ''common''; funcionará bien en cualquier lugar.

Si bien esto responde OP, hay más.

Apéndice

Es probable que se encuentre con casos en los que desee importar un archivo CSS de manera incrustada, es decir, no a través de la directiva @import vainilla que proporciona CSS de fábrica, sino una fusión real de un contenido de archivo CSS con su SASS. Hay otra question , que se responde de manera inconclusa (la solución no funciona en entornos cruzados). La solución entonces es usar this extensión SASS.

Una vez instalado, agregue la siguiente línea a su configuración: require ''sass-css-importer'' y luego, en algún lugar de su código: @import ''CSS:myCssFile'';

Observe que se debe omitir la extensión para que esto funcione.

Sin embargo, nos toparemos con el mismo problema al tratar de importar un archivo CSS desde una ruta no predeterminada y add_import_path no respeta los archivos CSS. Entonces para resolver eso, necesitas agregar, otra línea en tu configuración, que es naturalmente similar:

add_import_path Sass::CssImporter::Importer.new(''sub_directory_a'')

Ahora todo funcionará bien.

PD, noté que la documentación del sass-css-importer indica un CSS: se requiere un prefijo además de omitir la extensión .css . Descubrí que funciona independientemente. Alguien comenzó un issue , que permaneció sin respuesta hasta el momento.

Answer 6

Para definir el archivo a importar, es posible usar todas las carpetas definiciones comunes. Solo debe tener en cuenta que es relativo al archivo que lo está definiendo. Obtenga más información sobre la opción de importación con ejemplos que puede consultar here .

Answer 7

Parece que algunos cambios en SASS han hecho posible lo que inicialmente has intentado hacer:

@import "../subdir/common";

Incluso conseguimos que esto funcione para una carpeta totalmente no relacionada ubicada en c:/projects/sass :

@import "../../../../../../../../../../projects/sass/common";

Solo agrega suficiente ... / para asegurarte de que terminarás en la raíz de la unidad y listo.

Por supuesto, esta solución está lejos de ser bonita, pero no pude obtener una importación de una carpeta totalmente diferente para trabajar, ni usando I c:/projects/sass ni estableciendo la variable de entorno SASS_PATH (desde :: load_paths reference ) a esa mismo valor.

Answer 8

Puede usar el :load_paths línea de comando -I o la opción :load_paths del código Ruby para agregar sub_directory_a a la ruta de carga de Sass. Entonces, si está ejecutando Sass desde el root_directory , haga algo como esto:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Luego, simplemente puede usar @import "common" en more_styles.scss .

Answer 9

Tenía el mismo problema y encontré la solución agregando la ruta al archivo como:

@import "C: / xampp / htdocs / Scss_addons / Bootstrap / bootstrap";

@import "C: / xampp / htdocs / Scss_addons / Compass / compass";

Answer 10

Tuve el mismo problema. De mi solución vine a esto. Así que aquí está tu código:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

Hasta donde sé si quieres importar un scss a otro, tiene que ser parcial. Cuando está importando de un nombre de directorio diferente su more_styles.scss a _more_styles.scss . Luego, impórtelo en su template.scss como este @import ../sub_directory_b/_more_styles.scss . Funcionó para mí Pero como mencionas ../sub_directory_a/_common.scss no funciona. Ese es el mismo directorio de template.scss . Es por eso que no funcionará.

Answer 11

Usando el paquete web con sass-loader puedo usar ~ para referirme a la ruta raíz del proyecto. Por ejemplo, asumiendo la estructura de carpetas OPs y que estás en un archivo dentro de sub_directory_b:

@import "~sub_directory_a/_common";

Consulte bajo Uso / Importaciones en el archivo léame de sass-loader: https://github.com/webpack-contrib/sass-loader

Answer 12

node-sass (el contenedor SASS oficial para node.js ) proporciona una opción de línea de comando --include-path para ayudar con tales requisitos.

Ejemplo:

En package.json :

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

Ahora, si tiene un archivo src/styles/common.scss en su proyecto, puede importarlo con @import ''styles/common''; en cualquier lugar de tu proyecto

Consulte https://github.com/sass/node-sass#usage-1 para obtener más detalles.

Answer 13

Esta es una media respuesta.

Eche un vistazo a Compass , con él puede colocar su _common.scss dentro de una carpeta de partials , y luego importarlo con @import common , pero funciona en todos los archivos.