css 混用

背景

在实际应用中，会存在
ess、css，
sass、css，
stylus、css
混用的情况，这时单一的 loader 无法解析css文件。会出现如下：

css直接被当作字符串插入，并不生效。

解决办法

less 混用

/** ./index.css **/
@import './index.less';
body{
  background: red;
}

/** ./index.less **/
body{
  div{
    color: yellow;
  }
}

需要安装 less 和 less-loader 。

yarn add less less-loader --dev

在webpack中的配置如下，将 less-loader 放到最后即可，也就是最先执行

module.exports = {
  module:{
    rules: [
      {
        test:/\.css/,
        use:['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
}

结果就如下图，样式被正常显示了。

sass 混用

/** ./index.css **/
@import './index.scss';
body{
  background: red;
}

/** ./index.scss **/
body{
  div{
    color: yellow;
  }
}

需要安装 node-sass sass-loader

yarn add node-sass sass-loader --dev

webpack 配置

module.exports = {
  module:{
    rules: [
      {
        test:/\.css/,
        use:['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
      }
    ]
  }
}

注意：在 node 16 版本以后不再使用 node-sass 和 sass-loader ，改为使用 sass 和 sass-loader，如果升级 node 则需要连带升级，如下安装：

yarn add sass sass-loader --dev

stylus 混用

yarn add stylus stylus-loader --dev

除了安装包不一样，配置方法和上面的都一样就不列举了。