How to shorten css classname using Vue js and Webpack

Question

I am using Vue.js and Webpack to develop a single page web application. Recently I came across this post to shorten the css classes. I was able to shorten css classes from css files. But I am unable to shorten the same classes from Html page.

Following is my extract from webpack.config.js:

module.exports = {
  context,
  entry: './index.js',
  module: {
    loaders: [
      {
        include: path.resolve(__dirname, './src'),
        use:[
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              getLocalIdent: (context, localIdentName, localName) => {
                return generateScopedName(localName, context.resourcePath);
              }
            }
          }
        ],
        test: /\.css$/
      },
      {
        include: path.resolve(__dirname, './src'),
        loader: 'babel-loader',
        query: {
          plugins: [
            'transform-react-jsx',
            [
              'react-css-modules',
              {
                context: context,
                generateScopedName: '[path]___[name]__[local]___[hash:base64:5]',
                webpackHotModuleReloading: false
              }
            ]
          ]
        },
        test: /\.js$/
      }
    ]
  },
  output: {
    filename: '[name].js'
  },
  stats: 'minimal'
};

You must have a huge CSS file for this to make much of a difference... — webnoob
– webnoob, Commented Dec 31, 2017 at 0:21

D.H.Lolo · Accepted Answer · 2021-10-14 13:04:25Z

There are 3 things u should do:

1> Replace css className and record a map Record<beforeMinified, afterMinified>;

2> Traverse html and jsx for static className and dynamic "classNames" which includes expressions and template syntax in className attributes;

3> For dynamic className in vue template, html and js, you should parse them in vue's way and replace them which is the most difficult.

Besides, I am working on shortening wechat miniprogram classnames by the mean above. But the dynamic syntax part is the most important also most difficult, as there are many cases while you should consider while coding compile logic. and coder should be very familiar with the process of vue compiling rules. However, as vue is a dynamic template frustructure just like wechat miniprogram, we can hardly escape from monkey-patching way. You can see the same issue for vue-cli(https://github.com/vuejs/vue-cli/issues/3884).

However, I found that there may be the other way to solve this. With css module and regular css classname coding rules, u could easily do this.

Collectives™ on Stack Overflow

How to shorten css classname using Vue js and Webpack

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related