Mô-đun css webpack không hoạt động

Tôi đã thử đóng gói (thông qua gói bản đồ) plugin và tải nó lên phiên bản máy chủ bitbucket của mình, sử dụng Devtools trên chrome như được đề xuất. Tôi có thể tìm kiếm và tìm tham chiếu đến các lớp css của mình trong “extensions-pull-request-diff- . đoạn. js”, tuy nhiên, bằng cách nào đó chúng không được áp dụng. Tôi có ấn tượng rằng aui bằng cách nào đó ghi đè lên những

Phương pháp tạo kiểu CSS của tôi như sau, tôi có một trình tải css được định cấu hình cho webpack.
Một đoạn trích trong “webpack của tôi. máy bốc xếp. js”

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const { I18N_FILES } = require('./webpack.constants');

function getLoaders({ isProductionEnv = false }) {
    return [
        {
        test: /\.css$/,
        use: [ 
            {
                loader: 'css-loader',
                options: {
                    import: true,
                },
            },
            ],

      },
        {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: '@atlassian/i18n-properties-loader',
                    options: {
                        i18nFiles: I18N_FILES,
                        disabled: isProductionEnv,
                    },
                },
                {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                    },
                },
            ],
        },

        {
            test: /\.less$/,
            use: [
                {
                    loader: isProductionEnv ? MiniCssExtractPlugin.loader : 'style-loader',
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: 'less-loader',
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        },

        {
            test: /\.(png|jpg|gif|svg)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {},
                },
            ],
        },

        {
            test: /\.soy$/,
            use: [
                {
                    loader: '@atlassian/i18n-properties-loader',
                    options: {
                        I18N_FILES,
                        disabled: isProductionEnv,
                    },
                },

                {
                    loader: '@atlassian/soy-loader',
                    options: {
                        dontExpose: true,
                    },
                },
            ],
        },

        {
            test: /\.cse.graphql$/,
            loader: '@atlassian/clientside-extensions-schema/loader',
        },
    ];
}

module.exports.loaders = isProduction => getLoaders(isProduction);

Sau đó, tôi chỉ cần nhập css vào tệp js plugin của mình như thế này

import "./styles.css"

Tệp css ví dụ

@import url("https://fonts.googleapis.com/css?family=Lato");

body {
  background-color: #eee;
}

#app {
  border-radius: 3px;
  border: 1px solid #e5e5e5;
  margin: 15px;
  background-color: white;
}

.tab {
  width: 100%;
  padding: 25px;
  font-family: sans-serif;
  color: #444;
}

ul.inline {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}

ul.inline,
li {
  display: inline-block;
  margin-left: 0;
  padding: 10px;
  border-bottom: 2px solid #eee;
  transition: all 0.5s;
  font-family: Lato, sans-serif;
  font-weight: 300;
  cursor: pointer;
  color: #aaa;
}

ul.inline,
li.selected {
  border-bottom: 2px solid #337ab7;
  color: #444;
}

Tôi nhận thấy rằng nếu tôi có các lớp css được đặt trong js và áp dụng kiểu trong thành phần thông qua thuộc tính kiểu thì nó hoạt động. Ví dụ bên dưới

dummyComponent.js:

import React, { Component } from "react";


const style = {
  "tab": {
    "width": "100%",
    "padding": "25px",
    "fontFamily": "sans-serif",
    "color": "#444"
  }
};

class Tabs extends Component {
  state = {
    selected: this.props.selected || 2
  };

  render() {
    return (
     
        
{this.props.children[this.state.selected]}

    );
  }
}

export default Tabs;

Nhưng, bằng cách nào đó, classNames khi nhập css không

Tất nhiên tôi có thể giải quyết vấn đề này và thay đổi mọi tên lớp thành thuộc tính kiểu và tham chiếu css nội tuyến, nhưng, điều này rất không thực tế, đặc biệt là khi tôi đang sử dụng một số thành phần OSS đi kèm với biểu định kiểu css mặc định và trong đó .
Điều này cũng có vấn đề với các kiểu phần tử như “ul. nội tuyến”.

Tôi nghĩ vấn đề là css-loader của bạn thiếu cấu hình MiniCssExtractPlugin và style-loader cần thiết bổ sung sẽ xử lý việc đưa các tệp CSS vào. Tương tự như những gì chúng tôi đang làm với các tệp .less

{
    test: /\.css$/,
    use: [
        { // Add this lines before css-loader
            loader: isProductionEnv ? MiniCssExtractPlugin.loader : 'style-loader'
        },

        {
            loader: 'css-loader',
            options: {
                import: true,
            },
        },
    ]
},

BTW. Nếu bạn đang sử dụng webpack v4, bạn nên tiếp tục sử dụng css-loader v2. Phiên bản v3 của css-loader chỉ tương thích với webpack 5+

Bản phát hành · webpack-contrib/style-loader

Trình tải kiểu. Đóng góp cho sự phát triển của webpack-contrib/style-loader bằng cách tạo một tài khoản trên GitHub