style-loader

通过向 DOM 中注入

(四)、url

 import link from './file.css'

  {
   test: /\.css$/,
   use: [
     { loader: 'style-loader/url', options: { attrs: { id: 'id' } } }
     { loader: 'file-loader' }
   ]
 }

(五)、transform 在样式加载器加载到页面之前修改CSS

 {
   loader: 'style-loader',
   options: {
      transform: 'path/to/transform.js'
   }
 }

transform.js:

module.exports = function(css){
    const transformed = css.replace('.classNameA', '.classNameB')

    return transformed;
}

(六)、 conditional

{
    loader: 'style-loader',
    options: {
       transform: 'path/to/conditional.js'
    }
}

conditional.js

module.exports = function(css){
    if ( css.includes('something I want to check')) {
         return css;
    }
    //if a false value is returned, the css won`t be loaded
    return false;
}

(七)、 insertAt

(八)、 insertInto

(九)、 sourceMap

{
    loader: 'style-loader',
    options: {
       sourceMap: true
    }
}

(十)、convertToAbsoluteUrls //解决了在启用sourceMap时，相对资源无法加载的问题

{
    loader: 'style-loader',
    options: {
       sourceMap: true,
       convertToAbsoluteUrls: true
    }
}