2017-08-03 67 views
0

這裏是我的WebPack配置意外的令牌。與進口的WebPack .css文件時

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' }, 

關閉的事情是,我有另外一個項目,就是一個接近副本,它工作正常。在這兩種情況下,我都像這樣導入.css。

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

錯誤:

[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... 

回答

1

這裏是有點工作圍繞它。在項目中,我使用IS-在瀏覽器的模塊,讓過去巴貝爾只導入外部樣式表,如果應用程序是在一個瀏覽器窗口,你可以在你的組件使用這樣運行的:

import isBrowser from 'is-in-browser'; 

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

的確這樣做只能在瀏覽器中工作。 – Noah

0

威力是因爲這個

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

這隻bablifies .jsx文件和排除節點模塊,你需要增加配置的.js文件也並註明不同時加載運行,如從可以看到裏面去節點模塊你的堆棧跟蹤。

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

希望它能幫助:)