vue中如何使用sass插件

注意：sass-loader版本不要使用8.0.0后期更新^8.0.0的用法

安装

yarn add node-sass sass-loader

配置

在webpack.base.conf.js文件中修改module ->rules添加

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

示例：

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      }
      //...其他
    ]
  },

使用

可以定义后缀名为scss名的文件
也可以在style标签中 添加属性lang=‘scss’

<style scoped lang="scss">
	$fontColor：#333;
	body{
		color:$fontColor;
	}
</style>