时间戳

首页 > 解决方案 > 从打字稿导入 SCSS

typescript - 从打字稿导入 SCSS

问题描述

我希望能够从我的打字稿文件中导入 SCSS 文件，并自动添加适当的<script>标签<link>。

我原以为这很简单，但我很难让它工作。

webpack.config.js

module.exports = {
  entry: {
    menuExample: {
      import: "./example/menu/index.ts",
      filename: "./dist/example/menu/index.js",
    },
  },
  resolve: { extensions: ["", ".ts", ".js"] },
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin({
      title: "Menu Example",
      filename: "[name].html",
      template: "./example/menu/index.ejs",
      chunks: ["menuExample"],
      inject: true,
    }),
  ],
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" },
      {
        test: /\.scss$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          "css-loader",
          "sass-loader",
        ],
      },
    ],
  },
}

example/menu/index.ts

import "./index.scss"

example/menu/index.ejs

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <%= htmlWebpackPlugin.tags.headTags %>
  </head>
  <body class="center">
    <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>
</html>

标签： typescriptwebpackhtml-webpack-pluginsass-loader

解决方案

推荐阅读