深入解析Vue2 添加對scss的支持

這篇文章主要介紹了詳解Vue2 添加對scss的支持，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

引入loader

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev

scss支持

為了使用scss，我們需要先安裝相關的node包：

npm install --save style-loader sass-loader node-sass file-loader

安裝好之後，為了可以在.vue和.scss中使用，需要在webpack.config.js中配置對應的解析器：

var webpack = require('webpack');
module.exports = {
 entry: ['./src/entry.js'],
 output: {
 path: __dirname,
 filename: 'build/main.js'
 },
 resolve: {
 alias: {
 'vue': 'vue/dist/vue.js'
 }
 },
 module: {
 loaders: [{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
 loaders: {
 scss: 'style-loader!css-loader!sass-loader'
 }//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力 

 }
 },
 {
 test: /\.js$/,
 loader: 'babel-loader',
 exclude: /node_modules/
 },{
 test: /\.css$/,
 loader: ['style-loader', 'css-loader']
 }, {
 test: /\.scss$/,
 loader: ['style-loader', 'css-loader', 'sass-loader']
 }, {
 test: /\.(png|jpg|jpeg|gif|bmp)$/,
 loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]']
 }//在此我向大家推薦一個前端全棧開發交流圈：619586920 突破技術瓶頸，提升思維能力
 ]
 }
};

關於上面resolve的配置，是因為編譯和打包源文件默認不一樣。

測試scss

打開PageTwo.vue測試一下：

<style><br>section {<br> & > div {<br> font-size: 20px;<br> }<br>}<br>/<style>

編譯正常。

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

對前端的技術，前端全棧技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的前端開發攻城師學習資料

知識體系已整理好，歡迎免費領取。還有視頻分享可以免費獲取。關注我，可以獲得沒有的經驗哦！

閱讀更多 前端攻城小牛 的文章

關鍵字: 支持 技術 詳解