javascript - 忽略全局 SCSS Webpack CSSModule

Question

我正在尝试将我的 webpack 配置为对所有 scss 文件使用 css 模块，"src/scss" 和 "node_modules" 文件夹中的文件除外.下面是我的配置文件

const webpack = require('webpack');
const combineLoaders = require('webpack-combine-loaders');
const ImageMinPlugin = require('imagemin-webpack-plugin').default;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebappWebpackPlugin = require('webapp-webpack-plugin');
const path = require('path');

const NODE_ENV = process.env.NODE_ENV || 'development';
const DEV_MODE = NODE_ENV !== 'production';
const PORT = process.env.PORT || 3000;
const FAVICON_DIR = './src/assets/favicon/favicon.png';
const ENTRY_CSS = path.resolve(__dirname, 'src/scss');
const NODE_MODULE_PATH = path.resolve(__dirname, 'node_modules')
console.log('ENTRY_CSS: ', ENTRY_CSS);
console.log('NODE_MODULE_PATH: ', NODE_MODULE_PATH);
const styleRules = () => [
  {
    test: /\.scss$/,
    exclude: [
      ENTRY_CSS,
      NODE_MODULE_PATH
    ],
    loader: combineLoaders([
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        query: {
          modules: true,
          importLoaders: 1,
          localIdentName: '[local]--[hash:base64:5]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: function () {
            return [
              require('precss'),
              require('autoprefixer')
            ];
          }
        }
      },
      {
        loader: 'sass-loader',
        query: {
          includePaths: ['./src'],
        },
      },
    ]),
  },
  {
    test: /\.css$/,
    include: [
      path.resolve(__dirname, 'src')
    ],
    loader: combineLoaders([
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        query: {
          modules: true,
          importLoaders: 1,
          localIdentName: '[local]--[hash:base64:5]',
        },
      },
    ]),
  },
  /**
   * for global style, import libs, no CSS module applied for those files imported here.
   */
  {
    test: /\.scss$/,
    include: [
      ENTRY_CSS,
      NODE_MODULE_PATH
    ],
    loader: combineLoaders([
      {
        loader: 'style-loader',
      },
      {
        loader: 'css-loader',
        query: {
          modules: false,
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: function () {
            return [
              require('precss'),
              require('autoprefixer')
            ];
          }
        }
      },
      {
        loader: 'sass-loader',
        query: {
          includePaths: ['./src'],
        },
      },
    ]),
  },
];

module.exports = {
  entry: ['./src/index.tsx'],
  mode: DEV_MODE ? 'development' : 'production',
  devtool: DEV_MODE ? 'source-map' : '',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: 'ts-loader',
            options: {
              configFile: DEV_MODE ? 'tsconfig.json' : 'tsconfig.deploy.json',
            },
          },

        ],
      },
      ...styleRules(),
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
      {
        test: /\.(ttf|eot|woff)(\?v=[0-9].[0-9].[0-9])?$/,
        use: [
          {
            loader: 'file-loader',
            options: {},
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json'],
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.[hash].js',
  },
  devServer: {
    contentBase: './dist',
    compress: true,
    port: PORT,
    historyApiFallback: true,
    open: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
      'process.env.PORT': JSON.stringify(PORT),
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
    }),
    ...(FAVICON_DIR ? [new WebappWebpackPlugin(FAVICON_DIR)] : []),
    new ImageMinPlugin({
      disable: DEV_MODE,
      pngquant: {
        quality: '95-100',
      },
      test: /\.(jpe?g|png|gif|svg)$/i,
    }),
  ],
};

我在 "main.scss" 中导入 Bootstrap 的 SCSS 文件，该文件位于 "src/scss" 文件夹中。当我运行我的应用程序时， Bootstrap 文件也被 css 模块散列。我能知道我在做什么错误吗？

Answer 1

你可以使用 css-loader 的 exclude 选项，

loaders: [{
   test: /\.scss$/,
   exclude: fs.realpathSync('./node_modules/path/to/bootstrap/src/styles')
   loader: cssModulesLoader,
}