科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - unexpected character when using extract-text-webpack-plugin - Stack Overflow

    javascript - unexpected character when using extract-text-webpack-plugin - Stack Overflow

    programmeradmin2浏览0评论

    For some reason this configuration fails when trying to build with extract-text-webpack-plugin. I've been trying to work with extract-text-webpack-plugin for a few days and have been having a lot of issues trying to output the css. I feel like i've configured it properly after following many guides and looking at many SO questions, but maybe I'm missing something..

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

    error details:

    ~/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 onplete] (fs.js:405:3)
 @ ./static/js/file.js 3:0-29

    but when I use this for the scss loader, it works fine:

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

    For some reason this configuration fails when trying to build with extract-text-webpack-plugin. I've been trying to work with extract-text-webpack-plugin for a few days and have been having a lot of issues trying to output the css. I feel like i've configured it properly after following many guides and looking at many SO questions, but maybe I'm missing something..

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

    error details:

    ~/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 onplete] (fs.js:405:3)
 @ ./static/js/file.js 3:0-29

    but when I use this for the scss loader, it works fine:

    {
  test: /\.scss$/,
  include: /.scss$/,
  exclude: [
    static_scss,
    static_scss_pdf
  ],
  loaders : [
    'style-loader',
    'css-loader?sourceMap',
    'sass-loader?sourceMap'
  ]
},
    • javascript
    • ecmascript-6
    • webpack
    Share Improve this question asked May 11, 2016 at 16:30 ex-zac-tlyex-zac-tly 9791 gold badge8 silver badges24 bronze badges 3
    • Have a look at usage examples from the documentation: github./webpack/extract-text-webpack-plugin . – Felix Kling Commented May 11, 2016 at 16:34
    • @FelixKling so none of those examples use sass. Currently my problem is that the sass loader doesn't seem to be parsing sass syntax, according to the error. – ex-zac-tly Commented May 11, 2016 at 18:12
    • Did you try without the sourcemaps? I think I read somewhere that extract-text and sourcemaps don't work well together. I would also remove the includes and excludes to keep your config as simple as possible until you figure this out. – hansn Commented May 11, 2016 at 18:37
    Add a ment  | 

    2 Answers 2

    Reset to default 2

    The OP's problem is an unexpected @ (probably attached to an @import).
    The same error message occurs when it tries to resolve something like 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)

    I needed to install url-loader and file-loader and add them as loaders to 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" }
    ]
}

    Now it happily inlines those files:

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

    You are missing a ma at the end of the object before plugins. It should be:

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

    I stumbled across this as I was having exactly the same issue as you. If the ma isn't the issue, I got it working by following this guide: http://www.jonathan-petitcolas./2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论