Question

我正在尝试在我的亮元素项目中使用bootstrap中的模式。

im使用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>
      `;
  }

App-Component-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";

App-Modal-Component

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">&times;</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文件。但是行为相同：（

你能帮我吗？

使用带有照明元素/ Web组件的引导程序模态

0 个答案: