ASP.NET Core的CSS隔离问题可以通过以下步骤来解决:
首先,确保已安装最新版本的Node.js和Webpack。
修改项目文件,并添加以下NuGet包:
Microsoft.AspNetCore.SpaServices.Extensions
Microsoft.AspNetCore.SpaServices
Microsoft.AspNetCore.NodeServices
创建项目文件夹,例如“ClientApp”。
在“ClientApp”文件夹中,创建一个名为“webpack.config.js”的新文件,并将下面的代码添加到其中:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = { mode: "development", entry: { "main": "./src/main.js", "styles": "./src/styles.css" }, output: { filename: "[name].js", path: __dirname + "/wwwroot/bundle" }, module: { rules: [ { test: /.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: "[name].css" }) ] };
在“ClientApp”文件夹中,创建一个名为“src”的新文件夹,并在其中创建一个名为“styles.css”的新文件,并添加一些CSS样式。
在“ClientApp”文件夹中,创建一个名为“main.js”的新文件,并添加以下代码:
import "../styles.css";
现在,打开“Startup.cs”文件,并将以下代码添加到“ConfigureServices”方法中:
services.AddNodeServices(); services.AddSpaStaticFiles(configuration => { configuration.RootPath = "wwwroot"; });
添加以下代码到“Configure”方法中:
app.UseSpaStaticFiles(); app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
使用以下命令运行Webpack:
webpack --config ClientApp/webpack.config.js
现