Comment @import externe SCSS correctement avec webpack et Vue.js?

Comme Matières Composant Web est un exemple, je veux être en mesure d'importer SCSS de mon node_modules comme ceci:

@import '@material/elevation/mdc-elevation';

Cependant, je reçois ce message d'erreur lorsque vous essayez d'exécuter le webpack construire:

File to import not found or unreadable: @material/elevation/mdc-elevation.

@import './~/@material/elevation/mdc-elevation.scss'; ne fonctionne pas non plus.

Je suis sûr que le problème est quelque part dans mon webpack de config, mais je ne vois pas où.

Qu'ont-ils fait dans Matériel De Composants Web's Vue.js exemple afin de le faire fonctionner?

Voici mon npm-debug.journal dans le cas où vous en avez besoin.
Et voici le correspondant dépôt Git: sk22/spg-tinf-sem03/proj01

Merci d'avance!

Edit: je veux être en mesure d'importer les scss fichiers, pas les css compilé.

essayez @import '~/@material/elevation/mdc-elevation';
Cela ne fonctionne pas non plus. Cependant, l'exemple lié importations à l'aide de @material/elevation/mdc-elevation, ce qui devrait également travailler en quelque sorte.
Jetez un oeil à cet exemple simple: github.com/wemake-services/vue-material-button/blob/master/src/...
C'est là: github.com/material-components/material-components-web/blob/...
Je l'ai déjà ajouté ce (comme un webpack 2 option de règle) pour ma config, puisque le liés exemple utilise webpack 1. J'ai aussi essayé d'ajouter l'sassLoader objet, mais elle aussi n'a pas de travail.

OriginalL'auteur 22samuelk | 2016-12-28

  1. 11

    Obtenu.

    voici une partie de mon webpack 2 config module.rules:

    {
  test: /\.(sass|scss)$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(__dirname, 'node_modules')],
      },
    },
  ],
},

    Alors qu'ai-je fait de mal?
    Mon options objet a été placé dans le règle directement, pas le chargeur.

    L'ancien webpack config règle ressemblait à ceci:

    {
  test: /\.(sass|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},

    Voir la différence? Au lieu de la " sass-chargeur de chaîne, j'ai étendu à un objet, contenant les loader nom et le options objet, parce que la options s'appliquent uniquement à la sass-loader.

    (Vous pouvez également supprimer le chemin d'accès.résoudre et seulement écrire "node_modules", mais il pourrait être plus sûr de le quitter.)

    De vérifier cette page de documentation pour de plus amples informations. https://webpack.js.org/configuration/module/#rule-use

    Sans le loader, vous devez préfixer chaque importation avec un ~, qui webpack convertit à l' node_modules dossier, au moins avec ma configuration précédente.
    Mais ce sera un saut de la 3ème partie SCSS cadres comme Matériel De Composants Web, car ils utilisent @import déclarations sans ~ eux-mêmes, par exemple ici.

    À l'intérieur .vue fichiers

    Cela ne fonctionnera pas .vue fichiers, comme vue-loader utilise sass-chargeur sans les options par défaut.
    Donc, si vous voulez que cela fonctionne, vous avez probablement besoin de faire usage de la vue-chargeur propres options, comme décrit dans sa documentation.

    (Je ne suis pas en mesure de l'obtenir pour fonctionner pour une raison que je ne sais pas...)

    À l'intérieur .vue des fichiers de configuration qui fonctionne: github.com/Bobarev/vue-mdc-adapter-webpack-simple/blob/master/...

    OriginalL'auteur 22samuelk

  2. 8

    EDIT: Webpack a une section sur le sass-chargeur: https://webpack.js.org/loaders/sass-loader/ également de mentionner includepaths.

    J'ai eu le même problème avec @matériau et de la Vue. J'ai réussi à résoudre le problème sans avoir à ajuster la use propriété directement.

    Solution

    Étape 1: d'Abord créer une Vue par défaut 2.1 projet à l'aide de la CLI.
    La structure de votre fichier aura un ./build répertoire.

    Étape 2: Ouvrez le fichier "utils", vous verrez un cssLoaders() fonction qui retourne un objet/la carte pour les langues vue-loader prend en charge.

    Vous verrez à la fois sass et scss de cette carte.

    Étape 3: Modifier les valeurs de sass et scss:

      sass:    generateLoaders('sass', {
    indentedSyntax: true,
    includePaths:   [path.resolve(__dirname, '../node_modules')]
  }),
    scss:    generateLoaders('sass', {
  includePaths: [path.resolve(__dirname, '../node_modules')]
}),

    Étape 4: Aller à l' .vue de fichier que vous utilisez et modifier le lang attribut dans votre <style> élément soit sass ou scss.

    Étape 5: Après l'avoir fait passer pour le terminal/console et installer sass-loader avec:

    ngp installer sass-chargeur de nœud-sass webpack --save-dev

    Étape 6: Ensuite, exécutez npm run dev et cela devrait fonctionner.

    Pourquoi ce travail?

    Bibliothèques

    J'ai creusé un peu et il s'avère sass-chargeur utilise nœud-sass qui a certaines options telles queincludePaths de celui mentionné par @22samuelk. IncludePaths dit nœud-sass ou plutôt la bibliothèque sous-jacente LibSass inclure sass les fichiers depuis le répertoire/chemin.

    Vue

    Sass-options du chargeur de

    Par défaut, la Vue s'attend à ce que les actifs soient dans vos projets src/assets dossier (corrigez-moi si je me trompe). Vous pouvez cependant utiliser ~ à indicat vous voulez commencer vos projets racine qui ressemblerait `~/node_modules/@material/smth/mdc-smth.scss.

    Maintenant, si vous voulez que votre sass-chargeur d'utiliser autre chose que ces options, vous devez indiquer explicitement.

    Donc path.resolve(__dirname, '../node_modules' depuis le utils fichier est dans ./build et vous devez utiliser un chemin absolu pour sass-loader à comprendre où chercher.

    Vue-chargeur de config

    Ce n'est pas vraiment spécifique à la question, mais la vue-chargeur de config défini dans vue-loader.conf.js fonctionne comme suit:

    Il utilise la carte retournée par cssLoaders() pour construire les chargeurs prévu par webpack.
    Le retour de la carte ({key:value}) est ensuite utilisée en fournissant key comme une extension de fichier utilisée dans test: pour un objet loader. Le value est utilisé comme objet loader.
    Qui aimeriez comme ceci:

    {
  test: /\.(key)$/,
    use: [
  {
    loader: '//ld//-loader',
    options: {
      /*Options passed to generateLoaders('//ld//', options)*/
    },
  },
],
}

    Où key est le fichier de l'extension. Dans ce cas, ce serait soit sass ou scss. Et //ld//est le chargeur que vous souhaitez utiliser. Ce qui est montré dans Étape 3 comme 'sass'.

    J'espère que cela éclaircit certains trucs. M'a pris du temps parce que j'ai juste commencé à l'aide de Vue.

    Ou vous pouvez vérifier vue-matériel [npmjs.com/package/vue-material]

    OriginalL'auteur Byebye