Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't properly work with Semantic-UI Less #42

Open
IvanDimitrov2002 opened this issue Jan 14, 2020 · 2 comments
Open

Doesn't properly work with Semantic-UI Less #42

IvanDimitrov2002 opened this issue Jan 14, 2020 · 2 comments

Comments

@IvanDimitrov2002
Copy link

IvanDimitrov2002 commented Jan 14, 2020

So I've tested the plugin and it seems to work. The problem I face tho is that Purge cleans more than it needs to. When visiting different pages some styles are gone. For example the input fields are very ugly :D and some images are gone.
My next.config.js:

const withCSS = require('@zeit/next-css')
const withLess = require('@zeit/next-less')
const withPurgeCss = require('next-purgecss')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = withCSS(withLess(withPurgeCss({
  distDir: "../../dist/client",
  webpack(config, options) {
    if(process.env.NODE_ENV === 'production'){
      config.plugins = config.plugins || []
      config.plugins.push(new OptimizeCSSAssetsPlugin({
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        }
      }))
    }
    config.module.rules.push({
      test: /\.(png|svg|jpg|gif|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          publicPath: '/_next/static/',
          outputPath: 'static/',
          name: '[name].[ext]',
        },
      }
    })
    return config
  }
})))

My project structure is:

components/
pages/
semantic-ui/

In Semantic-UI are located .less files that compile when nextjs dev server is on or when you run next build

Thanks in advance

@ArnaudHambenne
Copy link

Experiencing similar behaviour with antd

@ShayMalchi
Copy link

ShayMalchi commented Jun 6, 2020

Similar issue with Semantic UI.
This is my next.config.js:

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withPurgeCss = require('next-purgecss');

module.exports = withCSS(
  withSass(
    withPurgeCss({
      target: 'serverless',
      webpack(config) {
        config.module.rules.push({
          test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
          use: {
            loader: 'url-loader'
          }
        });
        return config;
      }
    })
  )
);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants