En SASS, ¿es posible importar un archivo desde 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? Probé algunas cosas diferentes, incluidas @import "../sub_directory_a/common"y @import "../sub_directory_a/_common.scss"pero nada parece funcionar.

Parece que algunos cambios en SASS han hecho posible lo que inicialmente intentó hacer:

@import "../subdir/common";

Incluso hicimos que esto funcionara para una carpeta totalmente no relacionada ubicada en c:\projects\sass:

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

Solo agregue lo suficiente ../para asegurarse de que terminará en la raíz de la unidad y estará listo para comenzar.

Por supuesto, esta solución está lejos de ser bonita, pero no pude obtener una importación de una carpeta totalmente diferente para que funcione, ni usar I c:\projects\sassni configurar la variable de entorno SASS_PATH(de :: referencia de load_paths ) en ese mismo valor.

Puede usar el -Iinterruptor de línea de comando o la :load_pathsopción del código Ruby para agregarlo sub_directory_aa la ruta de carga de Sass. Entonces, si está ejecutando Sass desde root_directory, haga algo como esto:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Entonces simplemente puede usar @import "common"en more_styles.scss.

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

@import "~sub_directory_a/_common";

Documentación: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Importar un .scssarchivo que tiene una importación anidada con una posición relativa diferente no funcionará. La respuesta principal propuesta (usando mucho ../) es solo un truco sucio que funcionará siempre que agregue lo suficiente ../para llegar a la raíz del sistema operativo de implementación de su proyecto.

1. Agregue la ruta de destino SCSS como destino 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, esta es una función del marco que está utilizando,

usar :load_pathsen config.rdpara marcos basados en brújula (por ejemplo, rieles)

use el siguiente código en scss-config.jsonparafourseven/meteor-scss

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

2. Utilice rutas absolutas (frente a rutas relativas).

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

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

La respuesta seleccionada no ofrece una solución viable.

La práctica de OP parece irregular. Un archivo compartido / común normalmente se encuentra debajo de partialsun directorio repetitivo estándar. Luego debe agregar un partialsdirectorio a sus rutas de importación de configuración para resolver parciales en cualquier lugar de su código.

Cuando encontré este problema por primera vez, pensé que SASS probablemente le brinda una variable global similar a la de Node __dirname, que mantiene una ruta absoluta al directorio de trabajo actual ( cwd). Desafortunadamente, no es así y la razón es porque la interpolación en una @importdirectiva no es posible, por lo tanto, no puede hacer una ruta de importación dinámica.

Según los documentos de SASS .

Necesita establecer :load_pathssu configuración de Sass. Dado que OP usa Compass, lo seguiré de acuerdo con la documentación aquí .

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

Entonces, asumiendo que config.rbestá 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 a OP, hay más.

Apéndice

Es probable que se encuentre con casos en los que desee importar un archivo CSS de forma incrustada, es decir, no a través de la @importdirectiva básica que CSS proporciona de fábrica, sino una combinación real del contenido de un archivo CSS con su SASS. Hay otra pregunta , que no se responde de manera concluyente (la solución no funciona en varios entornos). Entonces, la solución es utilizar esta 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';

Tenga en cuenta que la extensión debe omitirse para que esto funcione.

Sin embargo, nos encontraremos con el mismo problema al intentar importar un archivo CSS desde una ruta no predeterminada y add_import_pathno respeta los archivos CSS. Entonces, para resolver eso, debe agregar otra línea en su configuración, que es naturalmente similar:

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

Ahora todo funcionará bien.

PD: noté que la sass-css-importerdocumentación indica CSS:que se requiere un prefijo además de omitir la .cssextensión. Descubrí que funciona independientemente. Alguien inició un problema , que hasta ahora no ha recibido respuesta.

Gulp hará el trabajo para ver sus 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'));
});

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

Ejemplo:

En package.json:

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

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

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

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

Si usa Web Compiler en Visual Studio, puede agregar la ruta includePathen compilerconfig.json.defaults. Entonces no hay necesidad de algunos, ../ya que el compilador usará includePath como ubicación para buscar la importación.

Por ejemplo:

"includePath": "node_modules/foundation-sites/scss",

Esta es una respuesta a medias.

Eche un vistazo a Compass , con él puede colocarlo _common.scssdentro de una partialscarpeta y luego importarlo @import common, pero funciona en todos los archivos.

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

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

Por lo que sé, si desea importar un scss a otro, debe ser parcial. Al importar de directorio diferente nombre su more_styles.scssa _more_styles.scss. Luego impórtelo a su template.scss@import ../sub_directory_b/_more_styles.scss. Funcionó para mí. Pero como mencionaste ../sub_directory_a/_common.scssno funciona. Ese es el mismo directorio del template.scss. Por eso no funcionará.

Considere el uso del parámetro includePaths ...

"El compilador SASS usa cada ruta en loadPaths al resolver SASS @imports".

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

La mejor manera es utilizar sass-loader. Está disponible como paquete npm. Resuelve todos los problemas relacionados con la ruta y lo hace muy fácil.

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

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

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