我的擴展在構建時不包含任何 css 檔案，我不知道是什么讓它這樣做。我沒有改變Common.tsx腳手架。我自己的樣式或 Azure DevOps UI 樣式都不會被組件打包或使用。
Azure DevOps UI 檔案說要這樣做：
https://developer.microsoft.com/en-us/azure-devops/develop/extensions
使用 azure-devops-ui 包的 2.164.0 或更高版本時，擴展應匯入 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" }
]
})
]
};
Common.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 />);
uj5u.com熱心網友回復：
解決方案是增加包版本。我將包設定style-loader為"^3.3.1"并已修復。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/528412.html
標籤：反应网页包粗鲁的天蓝色 devops 扩展
上一篇：如何阻止Vue編譯器處理靜態資源