在我們的學(xué)習(xí)中我們可以通過各種方式來進(jìn)行梳理和提高我們的能力，那么今天小編就來和大家分享一下有關(guān)于“vue項(xiàng)目中怎么使用sass-loader？”這個(gè)問題的內(nèi)容相關(guān)的做法。
1、使用save會在package.json中自動添加。
我們通過使用?npm install node-sass --save-dev?、npm install node-sass --save-dev?這兩個(gè)代碼來進(jìn)行實(shí)現(xiàn)，但是通常在使用這個(gè)安裝時(shí)候會出現(xiàn)報(bào)錯(cuò)，我們可以通過淘寶npm鏡像來安裝node-sass解決。代碼如下：
npm install node-sass --save-dev
npm install sass-loader --save-dev如果通過這個(gè)代碼還是無法安裝的話我們可以執(zhí)行下面這串代碼：
?npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass ?
//說明
--registry=https://registry.npm.taobao.org 淘寶npm包鏡像
--disturl=https://npm.taobao.org/dist 淘寶node源碼鏡像，一些二進(jìn)制包編譯時(shí)用
2.進(jìn)入?webpack.base.config.js ?配置?scss module -- loaders (vue1.0)；?代碼如下：
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': 'style-loader!css-loader!sass-loader'
}
}
}3.打開?webpack.base.config.js?在?loaders?里面加上?module -- rules (vue2.0)?，代碼如下：
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}4.如果需要在 vue 文件?style?標(biāo)簽使用 scss 的話，需要聲明一下：
在vue1.0中我們需要使用?<style rel="stylesheet/scss" lang="scss"></style>?這串代碼；在vue2.0中我們需要使用?<style lang="scss" scoped="" type="text/css"></style>?這串代碼來實(shí)現(xiàn)。
總結(jié)：
這就是今天小編給大家?guī)淼挠嘘P(guān)于“vue項(xiàng)目中怎么使用sass-loader？”這個(gè)問題的相關(guān)資料和注意事項(xiàng)。當(dāng)然如果你對小編的看法有什么其他的見解也可以和小編探討喔！希望小編的分享對大家有所幫助，更多有關(guān)于vue的知識內(nèi)容我們都可以在W3cschool中進(jìn)行學(xué)習(xí)和了解。
