webpack-css

配置

webpack.config.js

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
...
module.exports = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.less$/,
                use: [
                    <!-- 'style-loader', 未区分开发/生产环境，demo直接用了css文件提取-->
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            <!-- 配置项有改动，及时到git上找相应版本配置 -->
                            <!-- 开启了module模式 -->
                            modules: {
                                mode: 'local',
                                localIdentName: '[path][name]__[local]--[hash:base64:5]'
                            },
                            localsConvention: "camelCase",
                            importLoaders: 2
                        }
                    },
                    'postcss-loader',
                    <!-- resolve-url-loader说是可以解决路径问题，可以转变成绝对路径，但是暂时没发现不用有啥问题，还是先加上了 -->
                    "resolve-url-loader",
                    "less-loader"
                ]
            }
        ]
    },
    plugins: [
        ...
        new MiniCssExtractPlugin()
    ]
}

postcss.config.js

module.exports = {
    ident: 'postcss',
    plugins: [
        <!-- 监听了@import，可以使在less文件中引用css文件时先走postcss处理，css-loader的importLoaders同作用 -->
        <!-- 在modules模式下，还可以处理在less文件中引用css文件时，正常将css文件中的局部样式一同export出去 -->
        require("postcss-import")(),
        <!-- require("autoprefixer")(), -->
        <!-- 新版本替换了nextcss，同样包含autoprefixer -->
        require("postcss-preset-env")(),
        <!-- 压缩，可以删除重复代码 -->
        require("cssnano")()
    ]
}

demo中混用了在less文件中引用css文件，测试能否正常将引用的css文件被loader处理，以及modules模式下是否正常，但是！！！实际情况还是不得会在less文件中引用css文件，如都一致使用预处理语言，不会出现任何坑，都正常按照loader顺序执行

base.less

...
@import "./main.css";
.test-moudles {
    composes: box from "./main.css";
    border: 1px solid black;
}

main.css

...
/* for test importLoaders and postcss-import */
/* 直接引用css文件的情况，通过importLoaders或postcss-import均正常 */
:global(#root) {
    transform: translate(100px,100px)
}
/* for test importLoaders and postcss-import */
/* modules方式下，直接引用css文件，通过postcss-import可将局部class正常被export出去 */
.test-moudles-main {
    transform: translate(10px,10px)
}
/* for test composes */
.box {
    border-color: pink;
    background-color: pink;
    transform: translate(5px,5px)
}
/* for test cssnano */
.box {
    border-color: pink;
    background-color: pink;
    transform: translate(5px,5px)
}

index.js

...
import style from "./css/base.less"
import img from './assets/image/sp/sp2/27.png'

const root = document.getElementById('root')

function cImg(){
    const image = new Image()
    image.src = img
    <!-- image.classList.add(style.testMoudlesMain) -->
    <!-- style.testMoudles包含两个class了，不能直接用add方法 -->
    image.className = style.testMoudles + ' ' + style.testMoudlesMain
    root.appendChild(image)
}
cImg()

先看下效果：

解释几点：
⚠️1⃣️ 非modules模式下，在less文件中引入css文件，css文件可以被postcss-loader处理，可通过postcss-import/importLoaders实现
⚠️2⃣️ modules模式下，光使用importLoaders不能抛出被引入的css文件中的局部class，但是composes可是正常使用，同时也能被postcss-loader处理，使用postcss-import没有以上问题，所以感觉postcss-import很有用。但是webpack文档中有特意描述说开启modules的时候需要加importLoaders，但是并没有描述清楚在解决什么问题，甚至importLoaders相关说明也不多，也有人提issue，我大概看了下貌似是解决上面的1⃣️问题，如图：

但是webpack这里描述开启modules是加上importLoaders没找到解释
然后在css-loader的readme上看到说importLoaders会有变化，好像只是个临时的结局方案的味道

so，目前了解到的就这么多，有postcss-import已解决了出现的问题