CSS 样式类合并神器 classnames

html-css019

CSS 样式类合并神器 classnames,第1张

在前端项目中写样式，往往会根据不同的情况给 DOM 元素不同的样式类来实现一些效果。用 React 项目举例，比如定义一个按钮：

再比如定义一个元素是否被激活：

区分这种样式常规的写法：

这种写法让人感觉非常的啰嗦，不优雅。而且如果判断条件和存在的样式类特别多，会写的很长很恶心。

如最常见的 Button 组件，它会有不同的样式、尺寸、显示方式、ghost 等等，这时候使用拼接和判断语句的方式都显得特别麻烦。

此时 classnames 闪亮登场！下面是它的用法：

classnames 很好的解决了按需使用不同样式类的问题。下面是一个 React 例子：

前后对比，明显优雅了很多。

回到按钮的问题，有了 classnames 就可以很好的解决样式类拼接麻烦的问题了。

墙裂推荐 classnames！

在一个CSS文件利用@import url('其他的CSS文件')

想引入几个CSS文件就用几个@import url

注意路径的的书写

首页需要两个CSS文件index.css和common.css

就在index.css的首行写入(两个CSS文件在同一个目录下)

@import url('common.css')

这样只需要在首页链接一个index.css文件就可以了。

文档里明确给出了输出到1个文件的配置示例

const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {

  optimization: {

    splitChunks: {

      cacheGroups: {

        styles: {

          name: 'styles',

          test: /\.css$/,

          chunks: 'all',

          enforce: true

        }

      }

    }

  },

  plugins: [

    new MiniCssExtractPlugin({

      filename: "[name].css",

    })

  ],

  module: {

    rules: [

      {

        test: /\.css$/,

        use: [

          MiniCssExtractPlugin.loader,

          "css-loader"

        ]

      }

    ]

  }

}

你的写法和示例几乎完全一样。问题在于你要改文件名时造成的问题。你修改了cacheGroup的name，那个name其实是cacheGroup的ID，和CSS没关系。所以你要修改的是plugins下的filename

  plugins: [

    new MiniCssExtractPlugin({

      filename: "[name].css", // 这里修改成filename: "main.css"

    })

  ],