意外的令牌。與進口的WebPack .css文件時

這裏是我的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...

來源

2017-08-03 Noah

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

import isBrowser from 'is-in-browser'; 

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

來源

2017-08-28 20:58:32 Adam

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

威力是因爲這個

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

希望它能幫助:)

來源

2017-08-28 21:12:29

意外的令牌。與進口的WebPack .css文件時

回答

相關問題