Мое расширение не содержит никаких файлов css, когда я его создаю, и я не знаю, что заставляет его делать это. Я не менял Common.tsx
, который был в лесах. Ни мои собственные стили, ни стили пользовательского интерфейса Azure DevOps не упаковываются и не используются компонентами.
В документации по пользовательскому интерфейсу Azure DevOps указано следующее:
https://developer.microsoft.com/en-us/azure-devops/develop/extensions
При использовании версии 2.164.0 или более поздней версии пакета azure-devops-ui расширения должны импортировать глобальные стили Azure DevOps, чтобы получить тот же внешний вид (семейство шрифтов, размеры шрифтов, обработка гиперссылок и т. д.) Azure. Страницы DevOps. Это можно сделать с помощью следующего импорта:
import "azure-devops-ui/Core/override.css";
Однако это уже сделано в Common.tsx
по умолчанию.
структура каталогов
src
│ Common.scss
│ Common.tsx
│
└───Components
└───RESTRequestButton
RESTRequestButton.html
RESTRequestButton.json
RESTRequestButton.scss
RESTRequestButton.tsx
webpack.config.js
const path = require("path");
const fs = require("fs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const entries = {};
const ComponentsDir = path.join(__dirname, "src/Components");
fs.readdirSync(ComponentsDir).filter(dir => {
if (fs.statSync(path.join(ComponentsDir, dir)).isDirectory()) {
entries[dir] = "./" + path.relative(process.cwd(), path.join(ComponentsDir, dir, dir));
}
});
module.exports = {
entry: entries,
output: {
filename: "[name]/[name].js"
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
alias: {
"azure-devops-extension-sdk": path.resolve("node_modules/azure-devops-extension-sdk")
},
},
stats: {
warnings: false
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
},
{
test: /\.s[ac]ss?$/,
use: ["style-loader", "css-loader", "azure-devops-ui/buildScripts/css-variables-loader", "sass-loader"]
},
{
test: /\.css?$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.woff?$/,
use: [{
loader: 'base64-inline-loader'
}]
},
{
test: /\.html?$/,
loader: "file-loader"
}
]
},
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: "**/*.html", context: "src/Components" }
]
})
]
};
Общий.tsx
import "azure-devops-ui/Core/override.css";
import "es6-promise/auto";
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./Common.scss";
export function showRootComponent(component: React.ReactElement<any>) {
ReactDOM.render(component, document.getElementById("root"));
}
RESTRequestButton.scss
@import "node_modules/azure-devops-ui/Core/_platformCommon.scss";
RESTRequestButton.tsx (только то, как я импортирую стиль и как я ссылаюсь на Common.tsx)
import "./RestRequestButton.scss";
import { showRootComponent } from "../../Common";
class RESTRequestButton extends React.Component<{}, {}> {
//a lot of code goes here
}
export default RESTRequestButton;
showRootComponent(<RESTRequestButton />);
Решение состояло в том, чтобы увеличить версии пакетов. Я установил пакет style-loader
на "^3.3.1"
, и это было исправлено.
Я не мог принять свой собственный ответ в тот же день, когда вопрос был опубликован, но это должно быть возможно через 3 часа.
Привет, Apodemus, спасибо за ваш отзыв и любезно поделиться. Чтобы помочь большему количеству разработчиков и пользователей, вы можете выделить это решение, чтобы помочь им с аналогичным сценарием.