Webpack css加载器没有导入css [英] Webpack css-loader is not importing CSS

问题描述

我让服务器通过读取this tutorial呈现我的create-react-app。

现在，我无法导入.js文件中的css文件！

已尝试使用style-loader、css-loader、extract-text-webpack-plugin、mini-css-extract-plugin调整webpack配置，但没有任何帮助。

无StackOverflow应答有帮助。所以这个问题。😅

这是我的package.json：

{
  ...
  "scripts": {
    "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
    "dev:start": "nodemon ./server-build/index.js",
    "dev": "npm-run-all --parallel build dev:*",
    "start": "serve --single ./build",
    "client": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "now-build": "react-scripts build && mv build dist",
    "deploy": "npm run build && now ./build -A ../now.json --public --name=kumarabhirup"
  },
  ...
}

这是webpack.server.js

const path = require('path');
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: './server/index.js',

  target: 'node',

  externals: [nodeExternals()],

  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },

  module: {
    rules: [
      {
        test: /.js$/,
        use: 'babel-loader'
      },
      {
        test: /.css$/,
        // use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'] NOT WORKED
        use: ExtractTextPlugin.extract('style-loader', 'css-loader') // NOT WORKING
      },
      {
        test: /.scss$/,
        use: [
            "style-loader",
            "css-loader",
            "sass-loader"
        ]
      }
    ]
  },

  plugins: [
    new webpack.EnvironmentPlugin({...process.env}),
    new ExtractTextPlugin('[name].css') // TRIED THIS TOO
    // new MiniCssExtractPlugin({ TRIED THIS
    //   filename: 'style.css',
    // })
  ]
};

错误，当我，import 'react-circular-progressbar/dist/styles.css'，

/Users/iqubex/Sites/kumarabhirup/kumarabhirup/node_modules/react-circular-progressbar/dist/styles.css:7
.CircularProgressbar {
^

SyntaxError: Unexpected token .
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:686:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:659:17)
    at require (internal/modules/cjs/helpers.js:22:18)
[nodemon] app crashed - waiting for file changes before starting...

我所期望的就是处理导入的css文件。请帮帮🙌🏻

推荐答案

@gopigorantala是对的。

将加载器更改为以下之一，它应该可以工作：

use: ['style-loader', 'css-loader']

或

use: [MiniCssExtractPlugin.loader, 'css-loader']

您可能不需要使用ExtractTextPlugin。只需使用MiniCssExtractPlugin。它会起作用的。

style-loader在运行时使用<style>将样式加载到DOM中，然后MiniCssExtractPlugin将它们提取到一个单独的文件中。因此，您不需要同时使用它们。

这篇关于Webpack css加载器没有导入css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！