css-loader，sass-loader 不工作 webpack 2

Question

我正在从 webpack 1 迁移到 webpack 2。我遵循了 webpack 迁移指南，但是，我在解析我的 css 文件时遇到了错误。我尝试了一个网络不要在 ExtractTextPlugin.extract 上使用“使用”，但它也不起作用。 webpack 版本 - "webpack": "2.2.1",

 Module parse failed: /home/gameon/Desktop/venue_lisiting/node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!style-loader!css-loader!postcss-loader!sass-loader!/home/gameon/Desktop/venue_lisiting/src/styles/desktop.scss Unexpected character '@' (1:0)
 You may need an appropriate loader to handle this file type.
 | @media only screen and (min-width: 960px) {
 | @import "./Skeleton/skeleton";
 | @import "colors";
 @ ./src/index.js 9:0-32


import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import path from 'path';
var ExtractTextPlugin = require('extract-text-webpack-plugin');
import autoprefixer from 'autoprefixer';

var loaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader'
  }
];


export default {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json']
  },
  devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
  entry: {
    app: path.resolve(__dirname, 'src/index.js'),
    vendor: ["react", "react-dom"],
    hotReloading : 'webpack-hot-middleware/client?reload=true'
  },
  target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
  output: {
    path: path.resolve(__dirname, 'dist'), // Note: Physical src are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: "[name].entry.chunk.js"
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: '[name].[hash].js', }),
    new ExtractTextPlugin("[name].css"),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
      __DEV__: true
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({     // Create HTML file that includes references to bundled CSS and JS.
      template: path.join(__dirname, './src/index.html'),
      filename: 'index.html',
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer(),
        ]
      }
    })
  ],
  module: {
    rules: [
      {  test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options : {
          presets: 'react'
        }
      } ,


      {test: /\.eot(\?v=\d+.\d+.\d+)?$/,
        use : [
          {
            loader : 'file'
          }
        ]},

        {test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use : [
            {
              loader : 'url',
              options:{
                limit : "10000&mimetype=application/font-woff"
              }
            }
          ]},

          {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use : [
              {
                loader : 'url',
                options:{
                  limit : "10000&mimetype=application/octet-stream"
                }
              }
            ]},

            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              use : [
                {
                  loader : 'url',
                  options:{
                    limit : "10000&mimetype=image/svg+xml"
                  }
                }
              ]},
              {test: /\.(jpe?g|png|gif)$/i,
                use : [
                  {
                    loader : 'url',
                    options:{
                      name : '[name].[ext]'
                    }
                  }
                ]},
                {test: /\.ico$/,
                  use : [
                    {
                      loader : 'url',
                      options:{
                        name : '[name].[ext]'
                      }
                    }
                  ]},
                  {test: /(\.css|\.scss)$/,
                    use :[
                      {
                          loader: ExtractTextPlugin.extract({
                          fallbackLoader: 'style-loader',
                          loader: loaders
                        })
                      }] }
                    ]
                  },
                };

Answer 1

我认为可能是加载器的顺序，所以 postcss-loader 应该是最后一个。无论如何，这里有一个 webpack 2 的工作配置示例，您可以关注 https://github.com/aganglada/preact-minimal/tree/master/config

希望对你有帮助:)

Answer 2

保持

new ExtractTextPlugin("[name].css"),

在plugins 和module 中修改css 规则如下：

...
{
    test: /\.scss$/,
    use: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
            {
                loader: 'css-loader',
                options: {
                    modules: true 
                }
            },
            'postcss-loader',
            'sass-loader'
        ]
    }),
},
...