详解Vue2 添加对scss的支持

(编辑：jimmy 日期: 2024/11/17 浏览：3 次 )

引入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'
          }
        }
      },
      {
        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"htmlcode">

<style lang="scss" scoped>
section {
 & > div {
  font-size: 20px;
 }
}
</style>



编译正常。
本篇最终项目文件Github地址：github.com/yelloxing/vue.quick/tree/V6


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：如何使用less实现随机下雪动画详解
下一篇：详解@Vue/Cli 3 Invalid Host header 错误解决办法