webpack 没有为 SCSS 创建 CSS 文件

Question

这是我的 package.json

{
  "name": "login-ts-react",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2"
  },
  "devDependencies": {
    "style-loader": "^0.21.0",
    "mini-css-extract-plugin": "^0.4.0",
    "@types/react": "^16.3.11",
    "@types/react-bootstrap": "^0.32.8",
    "@types/react-dom": "^16.0.5",
    "awesome-typescript-loader": "^5.0.0-1",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "import-glob-loader": "^1.1.0",
    "node-sass": "^4.9.0",
    "postcss-loader": "^2.1.4",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.0.1",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.8.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3",
    "webpack-env": "^0.8.0"        
  }
}

这是我的 webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: '/\.jsx?$/',
        loader: 'source-map-loader'
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      }      
    ]      
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.scss']
  }
}

我的理解是，当我运行我的应用程序并且从浏览器访问时，我应该看到一个 bundle.js 和一个 bundle.css。

当我运行我的应用程序并看到 chrome 开发工具的网络选项卡时，我看到了 bundle.js 但没有 bundle.css。

我的项目中有以下 SCSS 文件

$header-img: image-url('../images/image.gif', false, false);
.bg {
  background-image: $header-img;
  width: 100%;
  height: 100vh;
}

为什么 webpack 没有为我发出任何 CSS 文件？

编辑::根据下面的建议，我将该行添加到我的 index.tsx 文件中

require('../styles/style') 

现在没有错误。但在网络输出中仍然没有 *.css 文件。

Answer 1

我不断尝试多种排列组合，最后这个 webpack.config.js 对我有用。通过此 webpack 配置，我可以在浏览器网络选项卡中看到 main.css。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'

module.exports = {
  entry: './src/index.tsx',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        enforce: 'pre',
        test: '/\.jsx?$/',
        loader: 'source-map-loader'
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              includePaths: ["styles/"]
            }
          },
        ],
      }      
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.scss']
  }
}