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["//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