开发者问题收集

Webpack 和 .css

2020-01-06
141
mm2:OptionsAPI ivan$ npm -v
6.13.4

当包含 .css 文件时,

import BaseTable, { Column } from 'react-base-table'
import 'react-base-table/styles.css'

我收到如下错误:

ERROR in ./node_modules/react-base-table/styles.css
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .BaseTable {
|   box-shadow: 0 2px 4px 0 #eeeeee;
|   background-color: #ffffff;
 @ ./wwwroot/source/optionsList.jsx 14:0-38
 @ ./wwwroot/source/app.js

我的 webpack.config.js 如下所示:

more webpack.config.js 
const path = require('path');
module.exports = {
  entry: { 'main': './wwwroot/source/app.js' },
  output: {
    path: path.resolve(__dirname, 'wwwroot/dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      { test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
};

我在 webpack 中缺少了用于解析 .css 的某些内容吗?

EDIT 1

根据评论中的建议,我将 webpack.config.js 文件修改为:

const path = require('path');
module.exports = {
  entry: { 'main': './wwwroot/source/app.js' },
  output: {
    path: path.resolve(__dirname, 'wwwroot/dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
        {
          test: /\.css$/,
          use: [
              {
                  loader: "style-loader"
              },
              {
                  loader: "css-loader",
                  options: {
                      modules: false,
                      importLoaders: 2,
                      sourceMap: true,
                      minimize: true
                  }
              }
          ]
      },
      { test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }
      }
    ]
  }
};

我收到不同的错误:

ERROR in ./wwwroot/source/optionsList.jsx
Module not found: Error: Can't resolve 'style-loader' in '/Users/ivan/Documents/Projects/OptionsAPI'
 @ ./wwwroot/source/optionsList.jsx 14:0-38
 @ ./wwwroot/source/app.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] wbp: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] wbp script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ivan/.npm/_logs/2020-01-06T18_31_42_598Z-debug.log

EDIT 2

使用 npm install style-loader css-loader --save-dev 安装加载器后出现新错误:

npm run wbp

ERROR in ./node_modules/css-loader/dist/cjs.js?{"modules":false,"importLoaders":2,"sourceMap":true,"minimize":true}!./node_modules/react-base-table/styles.css
Module build failed: ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
    at validate (/Users/ivanfigueredo/Documents/Projects/OptionsAPI/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/Users/ivanfigueredo/Documents/Projects/OptionsAPI/node_modules/css-loader/dist/index.js:34:28)
 @ ./node_modules/react-base-table/styles.css 2:26-87
 @ ./wwwroot/source/optionsList.jsx
 @ ./wwwroot/source/app.js
2个回答

将其添加到您的 规则 并运行 npm install style-loader css-loader --save-dev

{
    test: /\.css$/,
    use: [
        {
            loader: "style-loader"
        },
        {
            loader: "css-loader",
            options: {
                modules: false,
                importLoaders: 2,
                sourceMap: true
            }
        }
    ]
}
Svetoslav Dimitrov
2020-01-06

尝试 import './react-base-table/styles.css' 或 import './styles.css'

如果仍然失败,请尝试使用内联样式进行调试

Logesh P
2020-01-06