vue.js: Lädt immer eine settings.scss-Datei in jedem Abschnitt mit Vue-Stil

Ich habe eine Weile mit der gleichen Frage gekämpft. Aber es gibt eine wirklich einfache Lösung. Diese Funktion wird von Node-Sass selbst geliefert.

so können Sie Ihre SCSS-Globals in einer Datei deklarieren, sagen Sie globals.scss, dessen Pfad lautet:

/src/scss/globals.scss

Jetzt können Sie einfach die vue-loader config bearbeiten:

loaders: {
  sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1&[email protected] "./src/scss/globals"',
  scss: '[email protected] "./src/scss/globals";'
}

und voila! Sie haben die scss-Globals für alle Ihre Vue-Komponenten verfügbar. Ich hoffe es hilft!

Update:

In den neuen Versionen von vue wurden viele Einstellungen aktualisiert. Daher scheinen die oben genannten Änderungen in aktuellen Vue-Projekten nicht trivial zu sein. Ich werde kurz erklären, wie alles miteinander verbunden ist-

Kurze Version:

Suchen Sie build/utils.js, der eine Methode enthalten würde (höchstwahrscheinlich cssLoaders() genannt). Diese Methode würde ein Objekt wie folgt zurückgeben:

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

Sie müssen lediglich die scss/sass-spezifische Zeile folgendermaßen ändern:

 return {
   ...
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders(['css', '[email protected] "~assets/styles/app";']),
   ...
  }

Lange Version:

webpack.base.conf.js enthält vue-loader, es würde ungefähr so ​​aussehen:

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

Die Variable vueLoaderConfig wird aus der Datei vue-loader.conf.js importiert, die diesem Objekt entspricht:

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

in build/utils.js-Datei finden wir die cssLoaders()-Methode, die Folgendes zurückgibt: ....

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

Sie müssen lediglich den obigen Code mit der aktualisierten scss-Konfiguration wie folgt aktualisieren:

       ...
        {
           ...
            scss: generateLoaders(['css', '[email protected]"~assets/scss/main";']),
           ...
         }
        ...

Somit sind die in src/assets/scss/main.scss-Datei geschriebenen Variablen/Mixins für alle Ihre Komponenten verfügbar.

Ich rechne damit, dass du Webpack benutzt? Sie können die settings.scss-Datei in Ihrer app.js-Datei in etwa wie folgt anfordern

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

also wenn es kompiliert ist. Alle Ihre Komponenten werden es bekommen. Sie müssen es nicht für jeden von ihnen benötigen.

Wenn Sie das Vue-Webpack-Template verwenden, können Sie es mit einer Codezeile in build/utils.js: scss: generateLoaders(['css', '[email protected] "~assets/styles/app";']) fixieren.

Dann fügen Sie in src/assets/styles/app alle @imports und voilà hinzu!

Ich glaube nicht, dass Sie eine Datei global importieren können. Ich würde das wahrscheinlich sowieso nicht machen, es ist nicht explizit genug. Wenn jemand diese Komponente in ein anderes Projekt verschieben möchte, hätte sie nein die Idee, dass sie auf diese Datei angewiesen ist.

Sie können jedoch die Pfadverwaltung erheblich vereinfachen. Sie können dies zu Ihrer Webpack-Konfigurationsdatei hinzufügen ...

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

Dann können Sie Dateien aus Ihrem Projektverzeichnis /sass frei einfügen, ohne sich um die Pfade kümmern zu müssen.

Wenn Sie alle Komponenten in demselben Verzeichnis speichern, bleibt Ihr Pfad zu Ihren Einstellungen.scss immer gleich.

Dies ist die gewünschte Funktionalität von Webpack. Das Prinzip ist, so wenig Globals wie möglich zu haben und nur das aufzunehmen, was Sie brauchen, um Ihr Projekt schlank, effizient und einfach zu begründen.

Vielleicht sollten Sie Ihre Komponenten/Ihr Styling so umstrukturieren, dass Sie nicht so viele benutzerdefinierte Stile in jeder Vue-Komponente haben (eigene Bootstraps erstellen?). Daher müssen Sie nicht in jeder Vue-Komponente ein bestimmtes Stylesheet einfügen.

Dies beantwortet Ihre Frage zwar nicht wirklich, aber es kann Ihnen helfen, sich an den Grundsätzen der Tools zu orientieren, die Sie ausgewählt haben.

Viel Glück!

Für Benutzer, die Vue CLI verwenden, lesen Sie https://cli.vuejs.org/guide/css.html#css-modules . Beispiel:

// 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";`
      }
    }
  }
}

Das hat es perfekt für mich behoben.

War dort - leider gibt es keine Möglichkeit, dies zu tun, ohne die Datei in jeder Komponente zu importieren. Um dies zu umgehen, können Sie versuchen, Hilfsklassen mit color: $some-variable und background-color: $some-variable zu erstellen, die einige Ihrer Anwendungsfälle abdecken können.

Wenn Sie eine Datei in jede importieren, stellen Sie sicher, dass sie nur Variablen enthält. Sie möchten Stilregeln nicht mehrmals einschließen.

Ansonsten würde ich für jede Komponente separate .scss-Dateien erstellen. Sie können weiterhin .vue-Vorlagen für html und js verwenden, Ihre Stile müssen jedoch getrennt bleiben. Dies ist wahrscheinlich der effizienteste Weg, dies zu tun.

Meine Lösung hat den Ordner settings.scss-Datei als Alias ​​im Webpack festgelegt.

vielleicht ist settings.scss kein globales Bedürfnis, vielleicht benötigen Sie auch eine ähnliche Datei wie setting2.scss, aber settings.scss steht in Konflikt mit setting2.scss. In diesem Fall können Sie nur eine Datei einfügen.

webpack config wie folgt:

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

sie können also settings.scss in Ihre Komponente importieren

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