Webpack css-loader 没有导入 CSS

Question

我的服务器通过读取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 文件的工作。请帮忙?????????

Answer 1

@gopigorantala 是对的。

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

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

或

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

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

style-loader 在运行时使用<style> 将样式加载到DOM 中，MiniCssExtractPlugin 将它们提取到单独的文件中。所以你不需要同时使用它们。