webpackでsassをパースする

Reactのプロジェクトにsassを導入するために、パッケージをインストールし、webpackの設定ファイルを編集しています。

./style/style.scssをパースして./dist/style.cssに持っていきたいのですが、以下のようなエラーが出てきてしまい、しばらく迷子状態になっています。。

ERROR in ./style/style.scss
    Module parse failed: /Users/Me/Codes/style/style.scss Unexpected token (7:10)
    You may need an appropriate loader to handle this file type.
    SyntaxError: Unexpected token (7:10)

パッケージ

    "css-loader": "^0.28.11"
    "extract-text-webpack-plugin": "^3.0.2"
    "node-sass": "^4.8.3"
    "sass-loader": "^6.0.7"
    "style-loader": "^0.20.3"
    "url-loader": "^0.6.2"
    "webpack": "^1.12.9"

webpack.config.js

var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
  filename: "[name].[contenthash].css",
  disable: process.env.NODE_ENV === "development"
});

module.exports = [
  {
    entry: ['./src/index.js'],
    output: {
      path: __dirname,
      publicPath: '/',
      filename: 'bundle.js'
    },
    module: {
      loaders: [
        {
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            presets: ['react', 'es2015', 'stage-1', 'flow']
          }
        }, {
          test: /.svg$/,
          loader: 'babel!svg-react'
        }, {
          test: /.(jpg|png)$/,
          loader: 'url-loader'
        }, {
          test: /.json$/,
          loader: 'json'
        }, {
          test: /.css$/,
          loader: "style!css?modules"
        }
      ]
    },
    resolve: {
      extensions: ['', '.js', '.jsx', '.json']
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './'
    }
  }, {
    entry: './style/style.scss',
    watch: true,
    output: {
      path: './dist/',
      filename: 'style.css'
    },
    module: {
      rules: [
        {
          test: /.scss$/,
          use: extractSass.extract({
            use: [
              {
                loader: "css-loader"
              }, {
                loader: "sass-loader"
              }
            ],
            fallback: 'style-loader'
          })
        }
      ]
    },
    plugins: [extractSass]
  }
];

もし解決方法をご存知の方がいたら教えていただきたいですm(_ _)m

行動規範の内容に同意します

回答2件

以下のパッケージをアップデート/導入して

"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.1"

webpack.config.jsファイルを以下のように変更してやっと解決しました...!
webpackのバージョンによって書き方が違ったり他のパッケージとの互換性がなくなったりしていたので何個もエラーを直さなければなしませんでしたが。。

var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [
  {
    entry: ['./src/index.js'],
    output: {
      path: __dirname,
      publicPath: '/',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        {
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: ['react', 'es2015', 'stage-1', 'flow']
          }
        }, {
          test: /.svg$/,
          loader: 'babel-loader!svg-react-loader'
        }, {
          test: /.(jpg|png)$/,
          loader: 'url-loader'
        }, {
          test: /.json$/,
          loader: 'json-loader'
        }, {
          test: /.css$/,
          loader: 'style-loader!css-loader?modules'
        }, {
          test: /.scss$/,
          loader: 'sass-loader!css-loader'
        }

      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx', '.json']
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './'
    }
  }, {
    entry: './style/style.scss',
    watch: true,
    output: {
      path: __dirname + '/dist/',
      filename: 'style.css'
    },
    module: {
      rules: [
        {
          test: /.scss$/,
          use: ExtractTextPlugin.extract({
            use: [
              {
                loader: 'css-loader'
              }, {
                loader: 'sass-loader'
              }
            ],
            fallback: 'style-loader'
          })
        }
      ]
    },
    plugins: [new ExtractTextPlugin('style.css')]
  }
];

投稿2018/04/05 09:08

rina_teratail

総合スコア14