Question

我正在开发一个使用纯JS（无框架）和SCSS并将其与Webpack捆绑在一起的项目。

结构大致如下：

│   index.html
│   index.js
│   webpack.config.js
│   
├───build
│       app.bundle.js
│       bundle.css
│       error.bundle.js
│       index.html
│                   
└───src
    ├───components
    │   │   App.js
    │   │   
    │   └───ErrorMessage
    │           error.scss
    │           ErrorMessage.js
    └───style
            footer.scss
            header.scss
            index.scss
            reset.scss

我唯一的入口点是index.js，用于初始化应用程序。 index.scss导入了App.js。

在我将ErrorMessage的样式移到单独的组件之前，一切都很好。

这是我的webpack配置：

const path = require('path');
const autoprefixer = require('autoprefixer');

module.exports = [{
  entry: {
    app: ['@babel/polyfill', './index.js']
  },
  output: {
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@babel/plugin-proposal-class-properties'],
              presets: ['@babel/preset-env']
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'bundle.css',
            },
          },
          { loader: 'extract-loader' },
          { loader: 'css-loader' },
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [autoprefixer()]
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['./node_modules']
              }
            }
          }
        ]
      }
    ]
  },
}];

我要尝试的是将该组件的样式直接导入到ErrorMessage.js，但仍将其编译为bundle.css并保留单个入口点。但是，当我运行webpack构建时，它仅将error.css编译为bundle.css文件。有没有办法像这样解析所有.scss文件？

Answer 1

为什么不创建1个入口点scss文件，然后将所有内容都包含到该scss文件中？然后，您只需要将该条目文件导入到js文件中

下面是我的webpack配置供您参考

plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }

如何合并所有导入到不同JS组件的.SCSS文件并将它们输出到单个.CSS包中？

1 个答案: