我正在尝试在我的 lit-element 项目中使用引导程序中的模态。
我使用 sass 分别加载引导程序 .scss 文件。但它根本没有真正显示按钮单击的模式。我尝试了很多,但它根本不起作用。
应用组件
import { css, customElement, html, LitElement, property, unsafeCSS } from 'lit-element';
import { router } from '@fhms-wi/router';
const componentCSS = require('./app.component.scss');
@customElement('app-root')
class AppComponent extends LitElement {
static styles = css`${unsafeCSS(componentCSS)}`;
....
firstUpdated() {
router.subscribe(path => this.requestUpdate());
}
renderRouterOutlet() {
switch (router.getPath()) {
...
case 'spielwiese':
return html`<app-modal></app-modal>`;
...
}
}
render() {
return html`
<app-header></app-header>
<app-drawer></app-drawer>
<div role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
${this.renderRouterOutlet()}
</div>
`;
}
应用组件-SCSS
@import "../node_modules/bootstrap/scss/bootstrap-grid.scss";
@import "../node_modules/bootstrap/scss/bootstrap-reboot.scss";
@import "../node_modules/bootstrap/scss/_functions.scss";
@import "../node_modules/bootstrap/scss/_variables.scss";
@import "../node_modules/bootstrap/scss/_mixins.scss";
@import "../node_modules/bootstrap/scss/_utilities.scss";
@import "../node_modules/bootstrap/scss/_transitions.scss";
应用程序模态组件
import { css, customElement, html, LitElement, query, property, unsafeCSS } from 'lit-element';
const componentCSS = require('./spielwiese.component.scss');
@customElement('app-modal')
class Spielwiese extends LitElement {
static styles = css`${unsafeCSS(componentCSS)}`;
constructor() {
super();
}
render() {
return html`
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
`;
}
}
App-Modal-SCSS
@import "../../index.scss";
@import "../../../node_modules/bootstrap/scss/_modal.scss";
@import "../../../node_modules/bootstrap/scss/_buttons.scss";
Webpack 配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
historyApiFallback: {
rewrites: [{ from: /^\/[a-z]*/, to: '/app/index.html' },]
},
publicPath: '/app/',
port: 9000
},
resolve: { extensions: ['.ts', '.js'] },
module: {
rules: [
{ test: /\.ts$/, use: { loader: 'ts-loader', options: { transpileOnly: true } } },
{
test: /\.scss$/, include: /index\.scss$/, use: ['style-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true, includePaths: ['./node_modules'] } }]
},
{
test: /\.scss$/, exclude: /index\.scss$/, use: ['to-string-loader',
{ loader: 'css-loader', options: { sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true, includePaths: ['./node_modules'] } }]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'fonts/',
publicPath: '/app/fonts'
}
},
{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
plugins: () => [autoprefixer()],
},
},
{
loader: 'sass-loader',
options: {
includePaths: ['./node_modules'],
}
}
]
}
]
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })]
};
我还尝试从 node_modules/bootstrap 文件夹中加载几乎所有单个 .scss 文件。但行为相同:(
请你帮助我好吗?