我正在使用lit.dev构建一个 Web 组件。对于我的组件,我想导入一个 SCSS 样式表并按以下方式使用它:
// example-component/example-component.ts
import { LitElement, HTML, css } from 'lit';
import { customElement } from 'lit/decorators.js';
import styles from './example-component.scss';
@customElement('example-component')
class ExampleComponent extends LitElement {
static styles = styles;
// or static styles = css`styles`;
// or static styles = css(styles);
render() {
return html`
<div class="example-component">
<h1>Yaay! Example component.</h1>
</div>
`;
}
}
export default ExampleComponent;
5.51.1
我正在使用 Webpack和 TS设置这个项目。
这是我的webpack.config.js
:
const path = require('path');
const Copy = require('copy-webpack-plugin');
const WebpackHtml = require('html-webpack-plugin');
module.exports = {
entry: {
'example-component': './src/example-component/example-component.ts',
},
mode: 'development',
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.(scss|css)$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new Copy({
patterns: [
{ from: 'manifest.json', }
]
}),
new WebpackHtml({
filename: 'popup.html',
chunks: './src/popup/popup.ts',
}),
],
resolve: {
extensions: ['.ts', '.js', '.css', '.scss'],
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
}
};
我需要 SASS,因为我从第三方库(Bootstrap)导入了很多 mixins 和变量。根据文档,使用外部样式表的唯一方法是通过<link>
标签嵌入它,他们不推荐这样做。但是,由于我使用的是捆绑程序,我想知道是否有任何可用的解决方法(可能是这种情况,但我是 Webpack 新手)。谢谢!