前言

  • 问：为什么应用loader？

    • webpack本身只能了解js类型的文件，loader能够将所有类型的文件转换为webpack能够解决的无效模块。

  • 问：本节有哪些loader？

    • style-loader、css-loader、less-loader、sass-loader、postcss-loader

.css 文件

css-loader

  1. 下载相干loader
    yarn add style-loader css-loader --dev

  2. webpack.config.js文件中增加规定

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

    loader的加载程序为从右至左
    css-loader：将.css文件的内容转化为js字符串
    style-loader：动态创建<style>标签，将转化的字符放入\<style>标签中

  3. 创立src/css/base.css文件

    base.css文件内容

    index.html中增加
  4. 在入口文件中，引入.css文件
  5. 执行命令
    yarn build

  6. 页面成果

解决.less文件

less-loader

  1. 下载相干loader
    yarn add style-loader css-loader --dev
    yarn add less-loader less --dev

    注：less为转换.less文件命令

  2. webpack.config.js文件中增加规定

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

    loader的加载程序为从右至左
    less-loader：将.less文件转换为.css文件
    css-loader：将.css文件的内容转化为js字符串
    style-loader：动态创建<style>标签，将转化的字符放入\<style>标签中

  3. 创立src/less/base.less文件
  4. 在入口文件中，引入.less文件

    less文件内容

    index.html中增加
  5. 执行命令
    yarn build

  6. 页面成果

解决.scss/.sass文件

sass-loader

  1. 下载相干loader
    yarn add style-loader css-loader --dev
    yarn add sass-loader node-sass --dev

    注：node-sass为转换.scss/.sass文件命令
    注：如果node-sass装置失败，则执行 yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g

  2. webpack.config.js文件中增加规定

    {  test: /\.s(a|c)ss$/,  use: ['style-loader', 'css-loader', 'sass-loader']}

    loader的加载程序为从右至左
    sass-loader：将.scss/.sass文件转换为.css文件
    css-loader：将.css文件的内容转化为js字符串
    style-loader：动态创建<style>标签，将转化的字符放入\<style>标签中

  3. 创立src/scss/base.scss文件

    .scss文件内容

    index.html中增加
  4. 在入口文件中，引入.scss文件

    .scss文件内容

    index.html中增加
  5. 执行命令
    yarn build

  6. 页面成果

款式适配浏览器，主动增加前缀，加强我的项目兼容性

postcss-loader

  1. 下载loader及相干
    yarn add postcss-loader autoprefixer --dev

    注：autoprefixer是PostCSS插件，能够主动增加所需的带前缀的属性申明。
    注：postcss也须要配置browserslist

  2. postcss.config.js(postcss配置文件)

       module.exports = {  plugins: [      // 引入插件       require('autoprefixer')  ]  };

  3. webpack.config.js文件中批改规定

    注：postcss-loader将(.less或.scss)转换后的.css文件增加前缀
  4. 批改base.css、base.less、base.scss文件(增加带前缀的属性)
  5. 执行命令
    yarn build

  6. 生成代码成果
    css：

    less：

    scss：

链接

上一篇 Webpack根底配置(二)
下一篇 Webpack根底配置(四)