vue项目使用sass

首先安装必要的模块

npm install node-sass --save-dev
npm install sass-loader --save-dev

使用--save会将其自动添加到package.json文件中

然后配置webpack.base.config.js文件，在loaders里面加上module --rules

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',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.scss/,
    loaders: ["style", "css", "sass"]
  }
]

最后，在style标签中使用scss时，声明一下

<style lang="scss" scoped="" type="text/css"></style>

对比上述配置，其余的模块配置与此类似。