javascript – 使用extract-text-webpack-plugin时的意外字符

由于某些原因,尝试使用extract-text-webpack-plugin构建时此配置失败.我一直在尝试使用extract-text-webpack-plugin几天,并且在尝试输出css时遇到了很多问题.我觉得我在遵循了许多指南并查看了许多SO问题之后我已经正确配置了它,但也许我错过了一些东西……

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

错误详情：

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

但是当我将它用于scss加载器时,它工作正常：

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

最佳答案

OP的问题是意外的@(可能附加到@import).
尝试解析像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)

我需要安装url-loader和file-loader并将它们作为加载器添加到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" }
    ]
}

现在它很高兴地内联这些文件：

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