Легко смешивайте модули css в проектах webpack

внешний интерфейс NPM CSS Webpack

предисловие

В этой статье описываетсяcss-loaderвключиcss模块После функции, как не конфликтовать с файлами стилей в упомянутом пакете npm.
Напримерantd-mobileВнедрение пакетов npm. Без специальной обработки файл стилей будет переведен вcss module.

1. Причина проблемы

{ 
    test: /\.css$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
            }
        },
        'postcss-loader'
    ] 
}

Приведенный выше фрагмент кода, взятый изwebpackнастроенmodule.rule.
Как можно заметитьwepackПри компиляции столкнулся.cssФайлы в конце будут переданыpostcss-loader,css-loaderа такжеstyle-loaderПроцесс по очереди.
потому чтоcss-loaderвключенныйcss模块функцию, чтобы все обрабатывалосьcssфайл, имя класса будет изменено.

2. Первоначальное улучшение

использоватьexcludeа такжеincludeразличать

1.node_moduleфайлы в папке, чтобы не быть в данный моментruleиметь дело с

{ 
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        }，
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
            }
        },
        {
            loader: 'postcss-loader'
        }
    ],
    exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

Как показано выше,node_moduleфайлы в папке, используйтеexcludeисключен из текущегоruleдля обработки.

2. Отдельная обработкаnode_modulecss файл внутри

{ 
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader'
        },
        {
            loader: 'css-loader'
        },
        {
            loader: 'postcss-loader'
        }
    ],
    include:[path.resolve(__dirname, '..', 'node_modules')]
}

Три, обновленная версия, поддержкаcss moduleРежим смешивания и нормальный режим

1. Различать два режима с именем файла

  • *.global.css 普通模式
  • *.css css module模式

единый здесьglobalключевые слова для идентификации.

2. Сопоставьте файлы с регулярными выражениями

// css module
{ 
    test: new RegExp(`^(?!.*\\.global).*\\.css`),
    use: [
        {
            loader: 'style-loader'
        }，
        {
            loader: 'css-loader',
            options: {
                modules: true,
                localIdentName: '[hash:base64:6]'
            }
        },
        {
            loader: 'postcss-loader'
        }
    ],
    exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

// 普通模式
{ 
    test: new RegExp(`^(.*\\.global).*\\.css`),
    use: [
        {
            loader: 'style-loader'
        }，
        {
            loader: 'css-loader',
        },
        {
            loader: 'postcss-loader'
        }
    ],
    exclude:[path.resolve(__dirname, '..', 'node_modules')]
}

4. Другие вопросы

lessВ использованииcss moduleкогда, даurlВозник конфликт при разборе , можно использоватьresolve-url-loaderЧтобы решить ее, перейдите непосредственно к коду:


test: /\.less/,
use: [
    {
        loader: "style-loader"
    },
    {
        loader: "css-loader", 
        options: {
            sourceMap: true,
            importLoaders: 2
        }
    },
    {
        loader: "postcss-loader", 
        options: {
            sourceMap: true
        }
    },
    {
        loader: "resolve-url-loader", 
        options: {
            sourceMap: true
        }
    },
    {
        loader: "less-loader", 
        options: {
            sourceMap: true
        }
    }
]

Ссылаться на

[1] Updated README regarding relative filepaths issue #121

Категории