css попутного ветра с модулями css в next.js - PullRequest
Новая
       58

css попутного ветра с модулями css в next.js

0 голосов
/ 26 октября 2019

Как настроить next.js для поддержки одновременного попутного css с модулями css? Я хочу обернуть tailwindcss весь проект: 

// /tailwind.scss
:global {
  @import "tailwindcss/base";
  @import "tailwindcss/components";
  @import "tailwindcss/utilities";
}

// /test-module.css
.example {
  font-size: 36px;
}


// /pages/_app.jsx
import '../talwind.scss';
...

И в качестве образца компонента: 

// /components/my-component.jsx
import css from '../test-module.css';

const Test = () => (
  <div className={`bg-red-500` ${css.example}}>Test Tailwind with CSS</div>
);

1 Ответ

0 голосов
/ 10 ноября 2019

Решением является разделенный загрузчик в стиле webpack. Загрузчик для глобального css, другой для загрузчика модулей css, поэтому загрузчик webpack выглядит следующим образом: 

{
  test: /\.s?[ac]ss$/,
  exclude: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    // 'css-loader',
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1,
        modules: {
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
    'postcss-loader',
    { loader: 'sass-loader', options: { sourceMap: true } },
  ],
},
{
  test: /\.global.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProduction,
        reloadAll: true,
      },
    },
    'css-loader',
    'postcss-loader',
  ],
},
...