webpacksass編譯

A. 為什麼webpack 編譯sass 的import不解析

你只把文件拷過來，而注冊表中沒有語言設置的信息。 把下面一段文字粘貼到記事本中

B. webpack和gulp學哪個postcss和sass學哪個

webpack和sass，vue和react兩個都要學，他們是主流框架，我感覺vue和react都挺好用的。。angular用得不是特別多，webpack是目前最流行的打包工具。

C. react+webpack+scss 怎麼編譯css獨立文件

處理scss文件需要sass-loader

npminstallsass-loadernode-sass--save-dev

【注】以下配置中需要用到的模塊，請自行安裝

extract-text-webpack-plugin

postcss-loader

precss

autoprefixer

然後在webpack.config.js文件做以下配置

//css文件提取器需要的插件

varExtractTextPlugin=require('extract-text-webpack-plugin');

//postcss-loader需要的配置項
varprecss=require('precss');
varautoprefixer=require('autoprefixer');
mole.exports={
...
mole:{
loaders:[
{
test:/.scss$/,
loader:ExtractTextPlugin.extract('style','css!postcss-loader','sass')}

]
},
postcss:function(){
return[precss,autoprefixer];
}
}

D. 安裝完sass-loader載入器解析 後怎麼將scss文件編譯成css

比如我使用webpack，那麼我打包的時候，編譯器就會幫我編譯好了。
LESS同理。

E. webpack編譯過程中，如何顯示編譯中的錯誤信息

webpack 編譯出錯了自然會顯示出錯信息的，不需要其他操作。
可以加上--display-error-details來看更詳細的錯誤日誌

F. webpack中是什麼意思有什麼用如何用

webpack是近期最火的一款模塊載入器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。
我們可以直接使用 require(XXX) 的形式來引入各模塊，即使它們可能需要經過編譯（比如JSX和sass），但我們無須在上面花費太多心思，因為 webpack 有著各種健全的載入器（loader）在默默處理這些事情，這塊我們後續會提到。

G. webpack sass-compass混用時 配置問題 報錯 請問如何跳坑

其實webpack很簡單，但是對於剛開始的新手，從gethub上下一個項目，一大堆的配置，著實有些頭大。 我也是從一個坑一個坑被坑著走過來的，差點被sass坑個半死，到現在我都沒有解析成功，只做到了解析less。

H. webpack怎麼對scss打包

使用樣式的話，css-loader和style-loader也是必須的依賴包，如果沒有安裝，可以類似上述的方法安裝
css-loader使你能夠使用類似@import 和 url(…)的方法實現 require()的功能；
style-loader將所有的計算後的樣式加入頁面中；
二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS文件中。

I. 請教webpack編譯sass報錯的問題

Sims2PackInstaller_v1514.exe 如果是這個就是用來安裝Sims2Pack的工具， 也可以用來整理安裝後的東西， 相當於官方的「內容管理器」，

J. webpack 怎麼直接實時編譯輸出文件

使用webpack編譯打包react是非常便捷的。這也是人們常用的一種方式。但是在使用過程中，一定要注意一個細節，那就是webpack和babel-loader的安裝位置。react安裝當然，使用react必須先安裝react和react-dom，其安裝方式很簡單（前提是我們必須安裝有npm）。#npminstallreactreact-dom–savereact安裝就這樣簡單，其實react和react-dom就是相當於js類庫。但是我們需要解析器來解析react的語法。react解析器babel安裝babel安裝的位置是我們這篇文章的目的。babel有兩種安裝的位置：一種是全局安裝，一種是本地安裝——也就是安裝在項目目錄下的node_moles下。#npminstallbabel-corebabel-loaderbabel-preset-react–save-dev//本地安裝#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝一般情況下我們選擇本地安裝，這樣便於管理。打包工具webpack的安裝同樣，webpack的安裝位置也是這篇文章描述的所要注意的點。當然，它也有兩種安裝的位置：全局安裝和本地安裝。#npminstallwebpack–save-dev//本地安裝#npminstallwebpack–g//全局安裝如果選擇本地安裝，那麼在使用的時候較麻煩一些，我們需要在命令前加上路徑。所以一般情況下都是全局安裝，這樣就可以在任意位置直接使用。這里我們選擇全局安裝。這樣才能出現我們將要說的問題。webpack配置文件編寫安裝完webpack以後，下面來編寫webpack配置文件webpack.config.js。這里我不寫全部，只寫載入loader部分。代碼一mole:{loaders:[{test:/\.js$/,loader:'babel',query:{presets:['react']}}]}編譯過程中出現的錯誤好了，到了關鍵的地方了。現在我們整個系統的配置是這樣的：babel安裝到本地，webpack安裝到全局位置，webpack配置文件如代碼一所示。接下來我們就要編譯打包我們的項目。#webpack執行該命令以後，你會發現出現如下的錯誤：ERRORin(webpack)/~/node-libs-browser/~/process/browser.jsMolebuildfailed:Error:Couldn'tfindpreset"react"relativetodirectory"/node/lib/node_moles/webpack/node_moles/node-libs-browser/node_moles/process"……這也就是說找不到babel-preset-react。好了，說了這么多終於在這里引出了我們將要討論的問題（這里大家不要嫌我啰嗦，為什麼出現這種問題，其原因總要弄清楚。什麼樣的配置會出現這種問題，了解以後才容易上手解決）。解決問題的方式出現上述問題以後，我們有這樣三種方式可以解決。方式一要解決這個問題很簡單。我們知道，出現這個問題是因為bable和webpack安裝的位置不同，所以找不到babel-preset-react。因為在配置文件中有這樣一段代碼。query:{presets:['react']}好了，既然知道是安裝位置不同，那我們可以將babel安裝在全局位置，這樣這個問題不就解決了嗎。#npmremovebabel-corebabel-loaderbabel-preset-react–save-dev//首先移除原先安裝的babel#npminstallbabel-corebabel-loaderbabel-preset-react–g//全局安裝沒錯，問題解決了。但是我們不推薦使用這種方式。因為這樣不便於管理，所以還是使用其他的方式。方式二此種方式和方式一大同小異。方式一是改變babel的安裝位置，而這里是改變webpack的安裝位置。原先webpack是安裝到全局位置的，所以找不到安裝到本地項目目錄下的babel-preset-react。因此我們可以改變webpack的位置。#npmremovewebpack–g//移除原先的webpack#npminstallwebpack–save-dev//將webpack安裝到本地位置——也就是項目目錄下的node_moles中#ln–s/項目根目錄/node_moles/webpack/bin/webpack.js/usr/bin/webpack//為了使用webpack方便，在這里我們在/usr/bin目錄下建立軟連接（也就是快捷方式）//這樣我們就可以在任意位置直接使用webpack命令了。此時我們已經改變了webpack的安裝位置。現在二者同在項目目錄下安裝。所以可以正確編譯了。此種方式較方式一，我個人比較推薦這種方式，這樣比較方便管理。但是，這種方式也不是沒有弊端。如果我們有多個項目，那我們就需要在每個項目下都安裝webpack，那豈不是很麻煩。所以這種方式也不是很好。方式三該方式應該說是最值得推薦的，因為不需要改變webpack和babel的安裝位置。webpack還是在全局位置，babel還是在本地項目位置下。我們需要做的就是修改webpack的配置文件，在代碼一的基礎上添加一句代碼。代碼二mole:{loaders:[{test:/\.js$/,loader:'babel',exclude:/node_moles/,query:{presets:['react']}}]}