beklenmedik karakter

Question

Bu nedenle, extract-text-webpack-plugin ile oluşturmaya çalışırken bu yapılandırma başarısız oluyor. Ben birkaç gün boyunca extract-text-webpack-plugin ile çalışıyorum ve css çıktısını almaya çalışan bir sürü sorun yaşıyordum. Ben

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"), 
    ] 
} 

hata ayrıntılarını .. i düzgün bir şey birçok kılavuzları takip ve birçok SO sorular bakarak, ama belki ben eksik sonra yapılandırılmış gibiyim

webpack.config.js:

~/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 

ama SCSS yükleyici için bu kullandığınızda, iyi çalışıyor:

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

Answer 1

Yo Eklentilerden önce nesnenin sonunda bir virgül eksik. Olmalıdır: Sana tam olarak aynı sorunu sahip olduğu gibi bu rastladım

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

. virgül sorunu değilse, bunu bu kılavuzda izleyerek çalışma var: http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

Answer 2

OP'ın sorunudur beklenmedik @ (muhtemelen bir @import bağlı).

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

webpack.config.js

: Bu 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) 

Ben url-loader yüklemek için gereken

ve file-loader gibi bir şey çözmek ve WebPack için yükleyici olarak ekleyin çalıştığında
aynı hata iletisi oluşuyor

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

Şimdi bu dosyalarda şu şekilde özetlenmiştir:

https://github.com/webpack/extract-text-webpack-plugin:

$ 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]