（VueJS）webpack中css的配置 Loader

什么是Loader

loader是webpack中一个非常核心的概念
webpack对应

• css
• 图片
• 一些高级的将ES6转化成ES5的代码
• 将TypeScript转化为ES5的代码
• 将scss、less转化成css
• 将jsx、.vue文件转化为js文件

等等功能的扩展

loader的使用

• 通过npm安装需要的loader

  Webpack官网：https://webpack.js.org/
  Webpack中文官网：https://www.webpackjs.com

  执行：
  npm install --save-dev css-loader
  npm install --save-dev style-loader

  报错：

G:\Weblianxi\Demo\Webpack\Webpack起步>npm install --save-dev css-loader
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path C:\Program Files\nodejs\node_cache\_cacache\tmp\7f657d0a
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\7f657d0a'
npm ERR!  [OperationalError: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\7f657d0a'] {
npm ERR!   cause: [Error: EPERM: operation not permitted, open 'C:\Program Files\nodejs\node_cache\_cacache\tmp\7f657d0a'] {
npm ERR!     errno: -4048,
npm ERR!     code: 'EPERM',
npm ERR!     syscall: 'open',
npm ERR!     path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\7f657d0a'
npm ERR!   },
npm ERR!   isOperational: true,
npm ERR!   stack: "Error: EPERM: operation not permitted, open 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\7f657d0a'",
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'C:\\Program Files\\nodejs\\node_cache\\_cacache\\tmp\\7f657d0a'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

解决：
权限问题，在cmd（以管理员身份运行）

• 在webpack.config.js中的modules关键字下进行配置

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

在main.js中添加引用：

require ('./css/normal.css');

css:

body{
    background-color: indianred;
}

结果：

背景变为红色