Warum bin ich nicht in der Lage zu kompilieren SASS mit Webpack?

Habe ich die folgenden Module, die in meinem Webpack config:

module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.html$/,
        loader: 'vue-html'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },

Können Sie sehen, dass ich mit sass-loader, und für *.scss-Dateien, die ich bin, die dieses pipeline: ['style', 'css', 'sass'].

Dann habe ich meine scss-Datei:

html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

(...)

Endlich habe ich meine HTML-Seite (in einer VUE-Datei aus vue.js), die Importe, die scss-Datei:

<script>

require('./styles/main.scss')

(...)

</script>

Aber irgendwie bekomme ich diesen Fehler beim ausführen des Projekts:

ERROR in ./~/css-loader!./~/sass-loader!./~/style-loader!./~/css-loader!./~/sass-loader!./src/styles/main.scss
Module build failed:
html {
^
      Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
      in /Users/td/uprank/src/styles/main.scss (line 1, column 1)
 @ ./src/styles/main.scss 4:14-247 13:2-17:4 14:20-253

Warum ist es immer die pipeline falsch? (Es erscheint webpack zu verarbeiten versucht ['css', 'sass', 'style', 'css', 'sass'] statt nur ['style', 'css', 'sass'] konfigurierten Module.

Was mache ich falsch?

Dank!

EDIT: Link, um den vollständigen Beispiel-Projekt: https://dl.dropboxusercontent.com/u/1066659/dummy.zip

  • require('./styles/main.scss') sollte nicht in <script> tag. stattdessen sollte es drin sein <style lang="sass"></style> mit sass import-syntax.
  • Ich kompiliert nun ohne Anzeige-Fehler. Aber die CSS wird nicht gerendert werden in die resultierende Seite (D. H. nicht immer in der html).
  • Ich habe einen link auf das komplette Projekt.
InformationsquelleAutor PedroD | 2016-05-04
  1. 32

    Den Grund, warum das passiert ist, weil Vue automatisch generiert loader Konfigurationen für CSS, SASS/SCSS, Stift.

    (Siehe projectRoot/build/utils.js Linien ~10 bis ~50)

    So, Sie sehen den Fehler, da Sie ein webpack loader, der versucht, die Datei zu importieren und dann Vue versucht zu importieren (bereits geladen) - Datei. So dass Sie denken kann, ist Ihr Lader Kette als sass -> css -> style -> sass -> css -> vue-style

    Um dieses Problem zu beheben, müssen Sie loszuwerden, die loader, die Sie Hinzugefügt:

    {
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
},

    und einfach verlassen sich auf der mitgelieferten loader.

    Können Sie laden Sie Ihre stylesheet in eine von zwei Arten:

    HINWEIS: Sie MUSS verwenden scss statt sass als sass wird versuchen, Sie zu analysieren, Ihr stylesheet mit der eingerückt syntax statt der Klammer-syntax.

    1:

    <style lang="scss">
  @import './styles/main.scss
</style>

    2:

    <style src="./styles/main.scss"></style>

    Beides importieren Sie das stylesheet, das letztere nur verhindert, dass Sie vom hinzufügen zusätzlicher styling der Komponente.

    • Kurze Ergänzung zum letzten Absatz: Sie können mehrere <style> - tags in einem .vue-Komponente, also, während Sie können nicht fügen Sie alle CSS-Regeln, um den tag mit der src - Attribut, können Sie fügen Sie einen zweiten tag und legen Sie Sie dort.
    • Sie retten meinen Tag!
    • Was ist, wenn ich importieren möchten scss-Datei in der JS-Datei?
    InformationsquelleAutor Taylor Glaeser
Schreibe einen Kommentar