首页 文章

Webpack 4 css模块TypeError:无法读取未定义的属性'context'

提问于
浏览
4

我刚刚升级到webpack 4.我使用css模块 .

错误:

./client/src/common/accordian-component/accordian.css中的错误(./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5 -2!./ client / src / common / accordian-component / accordian.css)模块构建失败:TypeError:无法在Object处读取未定义的属性“context” . (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:101:57)位于Object的Array.map()处 . (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:99:31)位于/ Users / phillipjones / Workspace / sl_pathfinder / website / node_modules / css-loader / lib / processCss . js:200:3来自上一次活动:在Object.loader(/ Users / phillipjones)的Promise.then(/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/cls-bluebird/lib/shimMethod.js:38:20) /Workspace/sl_pathfinder/website/node_modules/postcss-loader/lib/index.js:96:6)@ ./client/src/common/accordian-component/accordian.css 2:14-160 21:1-42: 3 21:158-42:2 22:19-165 @ ./client/src/common/accordian-component/accordian-item.jsx @ ./client/src/common/accordian-component/all-components.js @ ./client/src/common/accordian-component/accordian-component.jsx @ ./client/src/common/index.js @ ./client/src/views/main-view/all-components.js @ ./ client / src / views / main-view / main-view.jsx @ ./client/src/views/index.js @ ./client/src/routes/index.jsx @ ./client/src/App.jsx @ multi ./client/src/App.jsx

webpack.config.js

require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const importPlugin = require('postcss-import');
const postcssFunctions = require('postcss-functions')({
  functions: require('./postcss-functions') }); // eslint-disable-line
// const fs = require('fs');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || 'development';
// console.log({ nodeEnv });
let mode = 'production';
if (nodeEnv !== 'production') {
  mode = 'development';
}
// const api_base_url = process.env.API_BASE_URL || 'http://localhost:8000/api';

// Common rules
const rules = [
  {
    test: /\.jsx?$/,
    use: ['babel-loader'],
    include: /(pathfinder-common|src)/,
  },
  {
    test: /\.css$/i,
    include: /client/,
    use: [
      'style-loader',
      { loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          camelCase: true,
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            importPlugin(),
            autoprefixer({ browsers: ['last 2 versions'] }),
            postcssFunctions,
          ],
        },
      },
    ],
  },
  {
    test: /\.woff2?/,
    loader: 'url-loader',
    options: {
      name: '[path][name].[ext]?[hash]',
      mimetype: 'application/font-woff',
    },
  },
  {
    test: /\.(jpe?g|gif|svg|ico|ttf|otf|woff|woff2)(\?[a-z0-9=&.]+)?$/i,
    loader: 'url-loader',
    options: {
      name: '[path][name].[ext]?[hash]',
    },
  },

  {
    test: /\.png$/,
    loader: 'url-loader?mimetype=image/png',
    options: {
      name: '[path][name].[ext]?[hash]',
    },
  },
];

module.exports = {
  mode,
  context: __dirname,
  devtool: 'cheap-module-source-map',
  entry: ['./client/src/App.jsx'],
  output: {
    path: path.resolve(__dirname, './client/public'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
    modules: [path.resolve(__dirname, 'node_modules')],
    symlinks: true,
  },
  plugins: [
    // new ExtractTextPlugin('ml-common.css'),
    new webpack.optimize.OccurrenceOrderPlugin(),
    // new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.DefinePlugin({ 'process.env': {
      NODE_ENV: JSON.stringify(process.env.NODE_ENV) } }),
  ],
  module: {
    rules,
  },
  devServer: {
    contentBase: path.resolve(__dirname, './client/public'),
    hot: true,
    quiet: false,
    noInfo: false,
    publicPath: 'http://localhost:8000',
    overlay: {
      warnings: true,
      errors: true,
    },
  },
};

1 回答

  • 6

    升级了css-loader并且工作正常

    "css-loader": "^0.28.11",
    

相关问题