@broken-css/webpack-loader v0.0.8

安装

npm install -D @broken-css/webpack-loader

or

yarn add -D @broken-css/webpack-loader

要求

为了使得 @broken-css/webpack-loader 能正常运行，你的项目需要满足以下条件

• 项目根目录存在 .babelrc ， .babelrc.json 或 babel.config.js 来暴露项目的 babel 配置
• webpack 4 or 5

@broken-css/webpack-loader 内部使用 babel 来解析你的 JavaScript 代码，从而进行抽离和原子化你的 CSS 代码，因此如果你使用了一些新特性或 Typescript ，默认的 babel 解析器是无法识别这些新的特性，除非你通过配置文件暴露出来

示例

一个典型的 webpack 配置应该看起来像这样

// ...
 module: {
      rules: [
        {
          test: /\.(jsx|js|ts|tsx)$/,
          exclude: /node_modules/,
          use: [
            'babel-loader?cacheDirectory=true',
            '@broken-css/webpack-loader',
          ],
        },
        {
          test: /\.css$/,
          // use: ['style-loader', 'css-loader'],
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
      ],
    },
// ...

注意：@broken-css/webpack-loader 必须在 babel-loader 之前使用， 因为 babel 可能会使用 ES5 语法来模拟模板字符串特性，会导致 @broken-css/webpack-loader 无法识别模板字符串函数，进而无法正常运作