用vue构建项目笔记4(在vue中使用sass的配置)

为了配置这玩意，真是蛋碎一地，网上搜各种“vue-cli中如何配置sass”，版本大概有三四种，而且我还都配不成，大佬搜sass vue直接就配成了。

配置完成即便npm run dev成功了，不报错，但是也要试一下npm run build是不是能成功，如果在webpack.base.conf.js中配置失误，其实本地测试是看不出来的，一定要打包看看会不会成功。

sass写样式的好处我就不多说了，反正比原生css省事的多，下面是我的配置，可能随着vue脚手架的更新，会有一些配置已经用不到了：

1、默认已经安装了淘宝npm镜像后，安装sass插件

cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install --save-dev sass-loader style-loader css-loader  //我不知道最新版本的vue脚手架是不是还要用这个，但是网上文档里这条命令不和上两条写在一起，
//我就很不爽




然后找到webpack.base.conf.js 这是文件是用来配置webpack打包的。


module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          vueLoaderConfig,
          loaders: {
            'scss': 'style-loader!css-loader!sass-loader'   //这句可能在vue1.0才用的到，反正又不会报错，就写上了
          }
        }
      },
      {
        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]')
        }
      },
      { //下面这段是vue2.0需要的scss配置
			   test: /\.scss$/,
			   loaders: ["style", "css", "sass"]
			},
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }



这代码绝对是网上最全的，我翻了十几个教程，都没有我这个全，除了脚手架自动配置的代码以外，我就配置了一个sass，很干净。









然后在插件中写标签<style lang="scss" scoped="scoped"></style>就可以直接在里面写scss的语法了，其实我配置的是sass，用还是scss更顺手，带个括号
看的清晰，注意style中lang的内容。关于sass和scss语法区别，这就不多说了，看着用。
下面说引入外部公用scss文件




<style lang="scss" scoped="scoped">
	@import "../../assets/scss/common";
</style>	



把这个@import直接写在style标签中即可。如果写在script里引用样式，可能会报错
关于公用scss文件，引用时是可以省略后缀和开头下划线的。我这个common文件其实本来文件的名字是“_common.scss”，前下划线代表这个是公用样式，
不加也行。
最后切记一定要npm run build是不是能成功，如果报错说明webpack.base.conf.js配置有误