angular - change - SCSS Importación relativa a la raíz

page title angular 4

Question

Estoy en el proceso de refactorizar una aplicación Angular y al mover los componentes a nuevas ubicaciones de directorio, me estoy dando cuenta de que el manejo de las rutas de @import en los archivos SCSS de los componentes se está volviendo un poco tedioso.

Por ejemplo, digamos que tengo el archivo src/_mixins.scss en la raíz de mi aplicación y el componente src/app/my-widget/my-widget.component.scss importa el SCSS así que @import ''../../mixins''; . Todo bien y bien.

Pero luego decido que my-widget.component es realmente un "componente compartido" en otro componente my-thingy.component , así que creo una carpeta shared en src/app/my-thingy y muevo todo lo que estaba en src/app/my-widget en él.

Espero que aún estés conmigo ... Ahora tengo src/app/my-thingy/shared/my-widget y modifico mi archivo SCSS para importar @import ''../../../../mixins'' .

Nota: Este es un ejemplo simplificado. Algunos de los caminos se vuelven relativamente profundos (sin juego de palabras ... ¿ o no? ) Y todos estos . y / son un poco mucho.

TL; DR

Sería muy útil si desde el principio pudiera haber importado _mixins.scss relación con la raíz en todos los archivos SCSS de mis componentes para no tener que seguir jugando con las rutas @import al refactorizar. (Por ejemplo, algo @import ''~/mixins'' ). Existe algo como esto?

Lo que he intentado (y, lamentablemente, ha fallado):

1. @import ''~/mixins''; /** I had real hope for this one **/
2. @import ''mixins''; /** Just being overly optimistic here **/
3. @import ''~//mixins''; /** Now I''m just making stuff up **/

Entiendo que ya voy a tener que modificar los archivos de mi mod para que apunten a la nueva ruta del componente con todas estas "cosas en movimiento", pero ... oye, una cosa menos, ¿verdad?

Answer 1

La solución para angular-cli es agregar stylePreprocessorOptions a .angular-cli.json .

{
    "apps": [{
        ...
        "stylePreprocessorOptions": {
            "includePaths": [
                "./app/global-styles"
            ]
        },
        ...
    }]
}

si usa la representación del lado del servidor, recuerde agregar esto tanto para ssr como para la construcción principal de la aplicación; de lo contrario, obtendrá NodeInvocationException: Prerendering failed because of error: Error: Cannot find module ''C:/Users/.../ClientApp/dist-server/main.bundle.js''

{
    "apps": [{
            ...
            "outDir": "dist",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        },
        {
            ...
            "name": "ssr",
            "outDir": "dist-server",
            "stylePreprocessorOptions": {
                "includePaths": [
                    "./app/global-styles"
                ]
            },
            ...
        }
    ]
}

Answer 2

También puede usar {} para hacer referencia al nivel superior de la ruta del proyecto, por lo tanto, algo así funcionará.

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

Answer 3

• Si está utilizando Angular CLI, eche un vistazo a los estilos globales , específicamente a la opción "stylePreprocessorOptions" .
• Para el paquete web, puede configurar includePaths en la configuración del complemento sassLoader.
• Y es similar para las compilaciones includePaths pasas includePaths al complemento sass.

Cualquiera que sea su herramienta de compilación, sass tratará esas rutas como root, por lo que puede importarlas directamente, así que con:

includePaths: ["anywhere/on/my/disk"]

puede simplemente @import ''styles'' lugar de @import ''anywhere/on/my/disk/styles'' .