Vue項目使用sass及注意事項

原創 定栓 2020-02-22 04:07

Vue項目使用sass及注意事項

如何使用

npm鏡像替換

npm鏡像替換步驟

安裝sass

cnpm i -D sass-loader node-sass

配置sass

在build文件夾下的webpack.base.conf.js的rules裏面添加配置

{
	test: /\.scss$/,
	loaders: ['style', 'css', 'sass']
}

使用sass

vue文件所在的style樣式標籤上添加lang="scss"即可使用

注意事項

Module build failed: TypeError: this.getResolve is not a function（sass版本過高問題）

解決方法：當爲webpack3時在package.json文件設置node-sass版本設置爲"^4.7.2"， sass-loader版本設置爲"^6.0.7"，重新下載依賴cnpm i,執行npm run start

UnhandledPromiseRejectionWarning: CssSyntaxError

解決方法：scss文件css註釋使用多行註釋（/**/），不要使用單行註釋（//）

定栓
發佈了20 篇原創文章 · 獲贊 26 · 訪問量 3157
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Webpack原理

webpack原理查看所有文檔頁面：全棧開發，獲取更多信息。原文鏈接：webpack原理，原文廣告模態框遮擋，閱讀體驗不好，所以整理成本文，方便查找。工作原理概括基本概念在瞭解 Webpack 原理前，需要掌握以下幾個核心概念，以方便後面

Super_LD 2020-07-04 19:26:15

關於webpack打包babel配置報錯Module build failed: TypeError: Cannot read property 'bindings' of null的解決方法

webpack版本要與babel版本對應，否則即使配置項exclude配置了node_modules也可能會報錯。babel配置詳見GitHub地址 webpack 4.x | babel-loader 8.x | babel 7.x 對應

原創 2023-10-09 23:41:43

使用webpack編譯typescript

安裝相關依賴 npm i typescript ts-loader awesome-typescript-loader -D webpack.config.js新增配置項 { test: /\.tsx?$/, use: { loader:

原創 2023-10-09 23:41:42

webpack提取公用代碼

CommonsChunkPlugin插件 適用於多entry webpack.optimize.CommonsChunkPlugin   首先需要安裝項目中的webpack  npm i webpack -D   示例  提取page和pa

原創 2023-10-09 23:41:29

webpack第三方依賴包打包

接上次webpack的內容 在pages中引入lodash import * as_ from lodash' webpack.config.js entry中新增 vendor:['loadsh'] 在插件中配置 new webpack.

原創 2023-10-09 23:41:25

Invalid configuration object. Webpack has been initialised using a..

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API sche

Rhynie 2021-01-30 09:32:43

一文讀懂、入門Webpack

Q1：Webpack主要用來做什麼？ A1：Webpack是一個打包模塊化 JavaScript 的工具，在 Webpack 裏一切文件皆模塊，通過 Loader 轉換文件，通過 Plugin 注入鉤子，最後輸出由多個模塊組合成的文件。W

magic_engineer 2020-07-07 03:52:08

webpack@4中babel7配置

安裝 首先確保本地已經安裝了webpack和webpack-cli 安裝babel-loader npm i -D babel-loader 安裝玩後，控制檯有提示： 按照提示安裝@babel/core@^7.0.0 npm

huzhenv5 2020-07-05 10:22:31

Path.resolve()

path.resolve() 方法會將路徑或路徑片段的序列解析爲絕對路徑。 var path = require("path") //引入node的path模塊 path.resolve('/foo/bar', './baz'

samllplum 2020-07-03 22:28:04

vue項目打包後出現的map後綴文件

Vue項目打包後。代碼會經過壓縮混淆,static文件夾下的css和js文件對應的生成了map後綴的文件。map文件可以在調試代碼的時候,準確暑促哪一行哪一列的報錯信息，方便開發人員調試bug，但是它遠遠超出了對應的css和js的代碼質量

samllplum 2020-07-03 22:28:04

vue-cli3創建的項目中，默認集成的 webpack 配置

直接上代碼 vue-cli3 創建好的項目，已經幫我們做了下面的事情 通過「mini-css-extract-plugin」將 css 打包成單個文件 添加「@」別名，指向「src」目錄 通過「TerserWebpackPlug

前端散打王 2020-07-02 16:35:56

Webpack 4 學習之路（上）

Webpack simple 以下均在 Webpack 4.42.1 版本環境下 mkdir webpack-simple cd webpack-simple npm init npm i --save-dev webpack w

前端散打王 2020-07-02 16:35:56

webpack-dev-server解決單頁面應用路由問題

目前比較主流的框架如Vue、React等，都是單頁面應用的框架。一般我們在使用它們的時候，會使用官方腳手架來創建項目，所以我們不必關心單頁面應用路由是如何實現的，因爲腳手架中已經幫我們做好了配置。在具體項目開發中，我們只需要做相應

-小橙子- 2020-07-02 02:46:10

webpack中babel的使用（學習篇10）

babel的作用主要是：把ES6代碼轉換爲當前和舊版瀏覽器或環境中可以識別的js語法。下邊說說babel在webpack中的用法。 安裝： npm install --save-dev babel-loader @babel/co

-小橙子- 2020-07-02 02:46:10

深入淺出 Webpack【閱讀總結】章節一

前言 - 閱讀《深入淺出webpack》一書實踐記錄一 目錄 安裝與使用 Loader Plugin Devserver 源碼參考 安裝與使用 # npm i -D 是 npm install --save-dev 的簡寫，

Hi-Sen 2020-07-01 21:03:59