vue笔记 day5（3）webpack&css

1.使用import语法倒入css样式表

import './css/index.css'

报错，webpack默认只能打包js处理文件比如import $ from 'jquery'，所以css无法处理

解决方法：需要一个合适loader，第三方loader加载器。

2.css文件，需要安装

npm i style-loader css-loader -D

3.打开webpack.config.js文件新增一个配置结点

module: { // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
    ]
  }

less，scss同理：

main.js里面import：

import $ from 'jquery'
// const $ = require('jquery')

// 使用 import 语法，导入 CSS样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'

config匹配规则：

module: { // 这个节点，用于配置 所有 第三方模块 加载器 
    rules: [ // 所有第三方模块的 匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //  配置处理 .css 文件的第三方loader 规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //配置处理 .less 文件的第三方 loader 规则
      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 配置处理 .scss 文件的 第三方 loader 规则
    ]
  }

命令行：

sudo npm i less-loader -D

sudo npm i less -D

sudo npm i sass-loader -D

sudo cnpm i node-sass -D（这一条一定要用cnpm)

 

cnpm安装方法：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org