2017-08-03 1 views
0

Voici ma config webpackJeton inattendu. lors de l'importation fichier Css avec webpack

module: { 
    loaders: [ 
    { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']}, 
    { test: /\.json$/, loader: 'json-loader' }, 
    { test: /\.scss$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }, 
    { test: /\.css$/, loader: 'style!css?importLoaders=1!autoprefixer?browsers=last 2 version!sass' }, 

La chose est hors, j'ai un autre projet qui est une copie proche de cela et il fonctionne très bien. Dans les deux cas, j'importe le .css comme ceci.

import 'react-day-picker/lib/style.css' 

L'erreur:

[require-hacker] Trying to load "style.css" as a "*.js" 
[1] [piping] can't execute file: /Users/myUser/Projects/fed/bin/server.js 
[1] [piping] error given was: /Users/myUser/Projects/fed/node_modules/react-day-picker/lib/style.css:3 
[1] .DayPicker { 
[1]^
[1] 
[1] SyntaxError: Unexpected token . 
[1]  at createScript (vm.js:74:10) 
[1]  at Object.runInThisContext (vm.js:116:10) 
[1]  at Module._compile (module.js:533:28) 
[1]  at Module._extensions..js (module.js:580:10) 
[1]  at require.extensions.(anonymous function) (/Users/myUser/Projects/fed/node_modules/babel-register/lib/node.js:152:7) 
[1]  at Object._module2.default._extensions.(anonymous function) [as .js] (/Users/myUser/Projects/fed/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:260:68) 
[1]  at Module.load (module.js:503:32) 
[1]  at tryModuleLoad (module.js:466:12) 
[1]  at Module._load (module.js:458:3) 
[1]  at Function.module._load (/Users/myUser/Projects/fed/node_modules/piping/lib/launcher.js:32:16) 
[1] [piping] further repeats of this error will be suppressed... 

Répondre

1

est ici un peu d'un travail autour pour elle. Sur mon projet, je l'utilise le est-en-navigateur module pour obtenir babel passé et seulement importer les feuilles de style externes si l'application était en cours d'exécution dans une fenêtre du navigateur, que vous pouvez utiliser dans votre composant comme ceci:

import isBrowser from 'is-in-browser'; 

if (isBrowser) { 
    require ('react-day-picker/lib/style.css') 
} 
+0

En effet le faire que dans le navigateur a fonctionné. – Noah

0

pourrait être à cause de cette

{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']}, 

ce que les fichiers de bablifies et exclut les modules de nœud, vous devez ajouter la configuration des fichiers .js aussi et parler de ne pas aller à l'intérieur des modules de noeuds alors que le chargeur est exécuté comme on peut le voir votre trace de pile.

quelque chose comme

{ test: /\.js?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']}, 

Hope it helps :)