style-loader

通过向 DOM 中注入 <style> 标签实现css效果

(1) 安装：npm install style-loader --save-dev

(2) 用法：推荐结合 css-loader 一起使用

import style from './file.css'

{
    module: {
       rules: [
          {
             test: '/\.css$/',
             use: [
                { loader: "style-loader" },
                { loader: "css-loader" }
             ]
          }
       ]
    }
}

(3) options

(一)、hmr: 是否启用热模块更换

 {
   loader: 'style-loader',
   options: {
      hmr: false
   }
 }

(二)、basd

 {
    test: /\.css$/,
    use: [
       'style-loader',
       'css-loader'
    ]
 }

(三)、attrs style-loader将附加的属性加在元素上

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

 <style id = "id" ></style>

(四)、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
    }
}