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

Posted 2023-02-22

【中文标题】css-loader，sass-loader 不工作 webpack 2

【英文标题】：css-loader, sass-loader not working webpack 2

【发布时间】：2017-07-15 02:36:32

【问题描述】：

我正在从 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
                        )
                      ] 
                    ]
                  ,
                ;

【参考方案1】：

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

希望对你有帮助:)

【讨论】：

loader 的顺序没有问题。我刚刚检查过。

【参考方案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'
        ]
    ),
,
...