sass - style - webpack css vue

vue.js: siempre cargue un archivo settings.scss en cada sección de estilo vue

Question

Me encuentro repitiendo este mismo patrón en cada archivo .vue, para usar variables, etc .:

<style lang="scss">
  @import "../styles/settings.scss";

  .someclass { color: $some-variable; }
</style>

o si está anidado en una carpeta, debo recordar tener cuidado con la ruta:

<style lang="scss">
  @import "../../styles/settings.scss";

</style>

¿Hay una manera de importar globalmente ese archivo settings.scss en cada archivo .vue que creo? Busqué en los documentos y no lo vi, pero tal vez lo perdí, ¿o tal vez es algo para lo que necesito aprovechar el paquete web?

Answer 1

Calculo que usas webpack? Puede requerir el archivo settings.scss en su archivo app.js algo como esto

require("!style!css!sass!./file.scss");

Por lo tanto, cuando se compila. Todos tus componentes lo conseguirán. No tendrás que exigirlo en cada uno de ellos.

Answer 2

He estado allí: desafortunadamente no hay una manera de hacer esto sin importar el archivo en cada componente. Para solucionar esto, puede intentar crear clases de ayuda con color: $some-variable y background-color: $some-variable que puede cubrir algunos de sus casos de uso.

Si importa un archivo en cada uno, asegúrese de que solo contenga variables. No quieres incluir reglas de estilo varias veces.

De lo contrario, crearía archivos .scss separados para cada componente. Aún puede usar plantillas .vue para html y js, pero mantenga sus estilos separados. Esta es probablemente la forma más eficiente de hacerlo.

Answer 3

He luchado con la misma pregunta por un tiempo. Pero hay una solución muy simple. Esta característica viene a través del propio nodo-sass.

para que pueda declarar sus scss globals en un archivo, digamos globals.scss cuya ruta es:

/src/scss/globals.scss

Ahora simplemente puede editar la configuración de vue-loader :

loaders: {
  sass: ''vue-style-loader!css-loader!sass-loader?indentedSyntax=1&data=@import "./src/scss/globals"'',
  scss: ''vue-style-loader!css-loader!sass-loader?data=@import "./src/scss/globals";''
}

¡y voilá! Tienes los scss globales disponibles en todos tus componentes de vue. ¡Espero eso ayude!

Actualizar:

Se han actualizado muchos ajustes en las nuevas versiones de vue. Por lo tanto, los cambios anteriores pueden no parecer importantes en los últimos proyectos de vue. Así que voy a explicar cómo todo está unido entre sí.

Version corta:

Encuentre build/utils.js que contendría un método (probablemente llamado cssLoaders() ). Este método devolvería un objeto como este:

return {
   ...
    sass: generateLoaders(''sass'', { indentedSyntax: true }),
    scss: generateLoaders(''sass''),
   ...
  }

Simplemente necesita cambiar la línea específica de scss/sass a algo como esto:

 return {
   ...
    sass: generateLoaders(''sass'', { indentedSyntax: true }),
    scss: generateLoaders([''css'', ''sass?data=@import "~assets/styles/app";'']),
   ...
  }

Versión larga:

webpack.base.conf.js contiene vue-loader , se vería así:

    ...    
    {
            test: //.vue$/,
            loader: ''vue-loader'',
            options: vueLoaderConfig
        },
    ...

La variable vueLoaderConfig se importa desde el archivo vue-loader.conf.js , que es igual a este objeto:

    {
      loaders: utils.cssLoaders( Obj ),  // actual settings coming from cssLoader method of build/utils.js
      transformToRequire: {
       //some key value pairs would be here
      }
    }

en el archivo build/utils.js encontramos el método cssLoaders() que devuelve: ....

     return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders(''less''),
        sass: generateLoaders(''sass'', { indentedSyntax: true }),
        scss: generateLoaders(''sass''),
        stylus: generateLoaders(''stylus''),
        styl: generateLoaders(''stylus'')
      }

Simplemente necesita actualizar el código anterior con una configuración de scss actualizada como esta:

       ...
        {
           ...
            scss: generateLoaders([''css'', ''sass?data=@import"~assets/scss/main";'']),
           ...
         }
        ...

Por lo tanto, las variables / mixins escritas en el archivo src/assets/scss/main.scss estarán disponibles en todos sus componentes.

Answer 4

Los documentos oficiales se han actualizado desde que hice esta pregunta: https://vue-loader.vuejs.org/en/configurations/pre-processors.html

Para cualquier otra persona que vea esto en 2017 y más allá, consulte las instrucciones en ''carga de un archivo de configuración global''.

Answer 5

Mi solución es configurar el alias en la carpeta del archivo settings.scss en webpack,

tal vez settings.scss no sea una necesidad global, quizás también necesite un archivo como setting2.scss, pero settings.scss está en conflicto con setting2.scss, solo puede elegir introducir un archivo en este caso.

configuración de webpack de esta manera:

resolve: {
  alias: {
    ''~src'': path.resolve(__dirname, ''../src''),
    ''~styles'': path.resolve(__dirname, ''../src/styles''),
}

así, puedes importar settings.scss en tu componente

<style lang="scss">
   @import "~styles/settings.scss";
</style>

Answer 6

No creo que puedas importar un archivo globalmente. Probablemente no haría esto de todos modos, no es lo suficientemente explícito. Si alguien quiere mover ese componente a otro proyecto, no tendrían idea de que se basa en ese archivo.

Sin embargo, puede hacer que la gestión del camino sea mucho más fácil. Puede agregar esto a su archivo de configuración webpack ...

sassLoader: {
  includePaths: [
    path.resolve(__dirname, ''./sass'')
  ]
},

Luego, puede incluir archivos de su directorio raíz /sass proyectos libremente sin preocuparse por las rutas.

Answer 7

Para los usuarios que utilizan Vue CLI, lea https://cli.vuejs.org/guide/css.html#css-modules . Ejemplo:

// vue.config.js
const fs = require(''fs'')

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/variables.scss";`
      }
    }
  }
}

Esto me lo arregló perfectamente.

Answer 8

Si almacena todos sus componentes en el mismo directorio, su ruta a su configuración.scss siempre se mantendrá igual.

Esta es la funcionalidad deseada de webpack. El principio es tener la menor cantidad de globales posibles e incluir solo lo que necesita, manteniendo su proyecto ágil, eficiente y fácil de razonar.

Tal vez debería reestructurar sus componentes / estilo de manera que no tenga tantos estilos personalizados dentro de cada componente de Vue (¿crear su propio bootstrap?), Por lo tanto, no tendrá que incluir una determinada hoja de estilo dentro de cada componente de Vue.

Esto realmente no responde a su pregunta, pero podría guiarlo hacia la alineación con los principios detrás de las herramientas que eligió para trabajar.

¡La mejor de las suertes!

Answer 9

Si usa la plantilla de paquete web de Vue, puede corregirla con una línea de código en build/utils.js : scss: generateLoaders([''css'', ''sass?data=@import "~assets/styles/app";''])

Luego, en src/assets/styles/app asset src/assets/styles/app , agrega todas las @imports y voilà!