vue筆記 day5(3)webpack&css
阿新 • • 發佈:2018-12-20
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)