Проблемы с Webpack и Tailwindcss с Shopify Slate - PullRequest
Новая
       87

Проблемы с Webpack и Tailwindcss с Shopify Slate

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

Я использую Shopify Slate 1.0.0-beta.19 для создания собственной темы Shopify с Tailwindcss и Webpack.

По какой-то причине, когда я запускаю slate build, некоторые части библиотеки tailwindcss не вводятсяcss-файл похож на (Container / Width / Display), но (Margin / Padding / Background Colors) делает.

slate.config.js 

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

  module.exports = {
    'cssVarLoader.liquidPath': ['src/snippets/css-variables.liquid'],
    'webpack.extend': {
      resolve: {
        alias: {
          jquery: path.resolve('./node_modules/jquery'),
          'lodash-es': path.resolve('./node_modules/lodash-es'),
          'vue$': path.resolve('./node_modules/vue/dist/vue.esm.js'),
        },
      },
      module: {
        rules: [
          {
            test: /\.scss$/,
              use: [
                {
                  loader: 'postcss-loader',
                  options: {
                    ident: 'postcss',
                    importLoaders: 1,
                    plugins: [
                      require('tailwindcss'),
                      require('autoprefixer'),
                    ],
                  },
                },
              ],
            include: path.resolve(__dirname, './src/styles/theme.scss')
          }
        ]
      },
    },
  };

postcss.config.js 

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.vue',
    './src/**/*.liquid',
    './src/**/.liquid',
    './src/*.liquid',
    './src/layout/theme.liquid',
    './src/snippets/*.liquid',
    './src/templates/*.liquid',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: (content) => content.match(/[\w-/:%]+(?<!:)/g) || [],
});

// eslint-disable-next-line no-undef
module.exports = {
  plugins: [
    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),
    // eslint-disable-next-line no-process-env,no-undef
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : [],
  ],
};

theme.scss 

/**
 * Tailwindcss
 */

@tailwind base;

@tailwind components;

@tailwind utilities;

Выведенный файл CSS:

https://cdn.shopify.com/s/files/1/0263/1411/3106/t/2/assets/layout.theme.css

Это то, что генерируется после запуска развертывания slate.

Я почесываю голову на этот, так что любая помощь будет высоко ценится.

Спасибо.

...