carattere imprevisto quando si utilizza il plug-in extract-text-webpack

Question

Per qualche motivo questa configurazione non riesce quando si tenta di creare con extract-text-webpack-plugin. Ho provato a lavorare con extract-text-webpack-plugin per alcuni giorni e ho avuto un sacco di problemi nel tentativo di generare il css. Mi sento come ho configurato correttamente dopo aver seguito molte guide e guardando molte SO domande, ma forse mi manca qualcosa ..

webpack.config.js

var entry_object = {}; 
entry_object[build_js_dir + "file.js"] = static_js + 'file.js'; 
    entry: entry_object, 
    output: { 
    path: './', 
    filename: '[name]', 
    chunkFileName: "[id].chunk.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.js$/, 
     include: path.resolve(__dirname), 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
     presets: ['react', 'es2015'] 
     } 
    }, 
    { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract("css-loader!sass-loader") 
    } 
]} 
    plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    ] 
} 

dettagli di errore:

~/src/$ webpack --show-error-details 
Hash: ab317ccc65911901bea4 
Version: webpack 1.13.0 
Time: 1032ms 
         Asset  Size Chunks    Chunk Names 
./static/build/js/file.js 51.7 kB  0 [emitted] ./static/build/js/file.js 
    [1] ./static/scss/style.scss 0 bytes [built] [failed] 
+ 1 hidden modules 

ERROR in ./static/scss/style.scss 
Module parse failed: /home/zdelagrange/src/portal/cust-portal/bitsight/static/scss/style.scss Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '@' (1:0) 
at Parser.pp.raise (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13) 
at Parser.pp.getTokenFromCode (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2813:8) 
at Parser.pp.readToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2508:15) 
at Parser.pp.nextToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2500:71) 
at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:1615:10) 
at Object.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44) 
at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/Parser.js:902:15) 
at DependenciesBlock.<anonymous> (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/NormalModule.js:104:16) 
at DependenciesBlock.onModuleBuild (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) 
at nextLoader (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) 
at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 
at Storage.finished (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) 
at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/graceful-fs/graceful-fs.js:78:16 
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:405:3) 
@ ./static/js/file.js 3:0-29 

ma quando uso questo per il caricatore SCSS, funziona benissimo:

{ 
    test: /\.scss$/, 
    include: /.scss$/, 
    exclude: [ 
    static_scss, 
    static_scss_pdf 
    ], 
    loaders : [ 
    'style-loader', 
    'css-loader?sourceMap', 
    'sass-loader?sourceMap' 
    ] 
}, 

Answer 1

Yo manchi una virgola alla fine dell'oggetto prima dei plugin. Dovrebbe essere:

]}, 
    plugins: [ 
    new ExtractTextPlugin("[name].css"), 
    ] 
} 

Mi sono imbattuto in questo mentre stavo avendo esattamente lo stesso problema come te. Se la virgola non è il problema, ho funzionato seguendo questa guida: http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

Il problema dell'OP è un @ imprevisto (probabilmente collegato a un @import).
Lo stesso messaggio di errore si verifica quando si tenta di risolvere qualcosa come url(./filename.png)

ERROR in ./~/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png 
Module parse failed: /myproject/node_modules/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png Unexpected character '�' (1:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '�' (1:0) 

avevo bisogno di installare url-loader e file-loader e aggiungerli come caricatori a webpack:

npm install --save url-loader 
npm install --save file-loader 

webpack.config.js

module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
     { test: /\.png$/, loader: "url-loader?limit=100000" } 
    ] 
} 

Ora incorpora felicemente quei file:

$ webpack 
    ... 
    [69] ./~/css-loader!./~/jquery-ui/themes/base/tooltip.css 528 bytes {4} [built] 
    [70] ./~/css-loader!./~/jquery-ui/themes/base/theme.css 18.7 kB {4} [built] 
    [71] ./~/jquery-ui/themes/base/images/ui-icons_444444_256x240.png 5.05 kB {4} [built] 
    [72] ./~/jquery-ui/themes/base/images/ui-icons_555555_256x240.png 5.05 kB {4} [built]