javascript - Webpack 不捆绑 SCSS / CSS

Question

我正在尝试使用SCSS.

 "scripts": {
    "start": "webpack-dev-server --config webpack.dev.js --mode development"
  },
  "devDependencies": {
    "@babel/core": "^7.6.0",
    "@babel/preset-env": "^7.6.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "live-server": "^1.2.1",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }

我的webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    devServer: {
        port: 8080
    },
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"]
        },
        {
          test: /\.s[ac]ss$/i,
          use: ['style-loader', 'css-loader', 'sass-loader']
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-env']
          }
      },
      ]
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/index.html',
          inject: true,
          chunks: ['index'],
          filename: 'index.html'
        })
      ]
}

我的应用程序结构如下：

当我跑npm start起来看到我scss作为一个css文件出现在我的index.html.

不过，它看起来根本没有捡起它。

标签： javascriptcssnode.jswebpacksass

Answer 1

我看到您的 webpack 配置不正确，因为您使用的是 scss 而不是 css

下面是我的配置。你可以在这里查看更多

{
    test: /\.scss$/,
    use: [
        'style-loader',
        MiniCssExtractPlugin.loader,
        {
            loader: "css-loader",
            options: {
                minimize: true,
                sourceMap: true
            }
        },
        {
            loader: "sass-loader"
        }
    ]
},

然后像这样导入你的js文件

import "main.scss";