css-util-webpack-loader

---

Install

npm install --save-dev css-util-webpack-loader
 

yarn add --dev css-util-webpack-loader
 

Loader

• globalSassLoader
• unitConversionLoader
• cssRulesReplaceLoader

Usage

---

=> unitConversionLoader

 
// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                "style-loader", 
                "css-loader", 
                {
                 loader: require.resolve('css-util-webpack-loader/dist/unitConversionLoader'),
                 options: {
                    originUnit: 'px',
                    replaceUnit: 'rem',
                    precision: 5,
                    times: 0.01,
                 }
                }
            ]
        },{
            test: /\.scss$/,
            use: [
                "style-loader", 
                "css-loader", 
                {
                 loader: require.resolve('css-util-webpack-loader/dist/unitConversionLoader'),
                 options: {
                    originUnit: 'px',
                    replaceUnit: 'rem',
                    precision: 5,
                    times: 0.01,
                 }
                },
                "sass-loader", 
            ]
        }]
    }
};
 

before

 
.header {
  width: 40px;
  height: 30px;
}
 
.logo {
  font-size: 24px;
  color: #fff;
}
 

after

.header {
  width: .4rem;
  height: .3rem
}
 
.logo {
  font-size: .24rem;
  color: #fff
}
 
 

---

=> cssRulesReplaceLoader

 
// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.css$/,
            use: [
                "style-loader", 
                "css-loader", 
                {
                  loader: require.resolve('css-util-webpack-loader/dist/cssRulesReplaceLoader'),
                  options: {
                    rules: [{
                      name: 'color',
                      originValues: ['#ffffff', '#fff'],
                      replaceValue: '#108ec6'
                    }]
                  }
                }
            ]
        }]
    }
};
 

before

 
a {
  color: #ffffff;
  background: #ffffff;
}
 
p {
  font-size: 24px;
  color: #fff;
}
 
 
 

after

a {
  color: #108ec6;
  background: #ffffff;
}
 
p {
  font-size: 24px;
  color: #108ec6;
}
 
 

=> globalSassLoader

 
// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", 
                "css-loader", 
                "sass-loader", 
                {
                  loader: require.resolve('css-util-webpack-loader/dist/globalSassLoader'),
                  options: {
                    filePaths: [
                        require.resolve('../src/var.scss'),
                    ],
                  }
                }
            ]
        }]
    }
};
 

before

~var.scss

 
$primary-color: #067785;
$link-color: #067785;
$success-color: #52c41a;
$warning-color: #faad14; 
$error-color: #f5222d;
$font-size-base: 14px;
$heading-color: rgba(0, 0, 0, .85);
$text-color: rgba(0, 0, 0, .65);
$text-color-secondary : rgba(0, 0, 0, .45); 
$disabled-color : rgba(0, 0, 0, .25);
$border-radius-base: 4px;
$border-color-base: #d9d9d9;
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);
 

~header.scss

 
.header {
  background-color: $success-color;
  font-size: 26px;
}
 
.logo {
  color: $primary-color;
  width: 200px;
}
 

after

~header.scss

$primary-color: #067785;
$link-color: #067785;
$success-color: #52c41a;
$warning-color: #faad14; 
$error-color: #f5222d;
$font-size-base: 14px;
$heading-color: rgba(0, 0, 0, .85);
$text-color: rgba(0, 0, 0, .65);
$text-color-secondary : rgba(0, 0, 0, .45); 
$disabled-color : rgba(0, 0, 0, .25);
$border-radius-base: 4px;
$border-color-base: #d9d9d9;
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);
 
.header {
  background-color: $success-color;
  font-size: 26px;
}
 
.logo {
  color: $primary-color;
  width: 200px;
}