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)