質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • webpack

    241questions

webpack2でExtractTextPluginのエラーを解決する方法を教えて下さい。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 989
退会済みユーザー

退会済みユーザー

webpack2のExtractTextPluginを使用するとエラーが出てしまうのですが、
解決方法がわからず、困っています。
解決方法を教えていただきたいです。

// webpack.config.js

require('babel-polyfill');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');
var path = require('path');

module.exports = {
  devtool: 'inline-source-map',
  context: __dirname,
  entry: {
    'client': './src/client/index.js'
  },
  output: {
    path: '../app/assets/javascripts',
    filename: '[name]/bundle.js'
  },

  module: {
    loaders: [
        {
          test: /^((?!\.global).)*(scss|css)$/,
          loader: ExtractTextPlugin.extract(
            'style-loader',
            'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss-loader',
            'resolve-url',
            'sass'
          )
        },
        {
          test: /\.global.(scss|css)$/,
          loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'resolve-url', 'sass')
        },
        { test: /\.jsx$/, exclude: /node_modules/, loader: 'babel-loader' },
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
        { test: /\.(jpg|png|gif)$/, loader: 'url-loader', exclude: /node_modules/ }
    ]
  },
  plugins: [
    new ExtractTextPlugin('../stylesheets/[name]/bundle.scss', { ignoreOrder: true } )
  ]
};

エラー内容

configuration has an unknown property 'postcss'. These properties are valid:
client.1 |    object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
client.1 |    For typos: please correct them.
client.1 |    For loader options: webpack 2 no longer allows custom properties in configuration.
client.1 |      Loaders should be updated to allow passing options via loader options in module.rules.
client.1 |      Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
client.1 |      plugins: [
client.1 |        new webpack.LoaderOptionsPlugin({
client.1 |          // test: /\.xxx$/, // may apply this only for some modules
client.1 |          options: {
client.1 |            postcss: ...
client.1 |          }
client.1 |        })
client.1 |      ]
client.1 |  - configuration.output.path: The provided value "../app/assets/javascripts" is not an absolute path!
client.1 |  - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
client.1 |    object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
client.1 |  - configuration.resolve.extensions[0] should not be empty.
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

エラーを参考にpostcssから削除して、順番に検証してみるといいと思いますが、2であれば書き方が異なるような気もします。

Migrating from v1 to v2

自分の場合は、loaderとoptionsを分離する記法を使用しています。
長くなるけどわかりやすいので。。。

:(参考例)
const PostcssCssnext = require('postcss-cssnext');
:
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                importLoaders: 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [
                  PostcssCssnext({
                    browsers: ['last 2 versions'],
                    features: {
                      rem: true
                    }
                  })
                ]
              }
            }
          ]
        })
      },

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/28 21:46

    ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • webpack

    241questions