从零开始搭建vue-node-webpack前端项目环境step5

1、现在我们项目已是能够正确运行在node服务器上， 并且能够在浏览器中打开我们的页面，进行编写调试了。

现在就继续撸起我们的项目，继续编写css样式。写着写着，你就发现可能又有些不爽了，因为这时候我们写css是没问题，webpack热更新可以帮助我们自动刷新，但是你可能已经忍受不了css那罪恶的层级关系了。

so，这时候你就可能会联想到预编译处理语言scss,stylus,less等。在这里，我自己因为对scss比较熟，所以选用scss.我们若要使用scss同样需要在配置里面添加loader.首先先安装node-sass sass-loader这两个loader。然后再webpack.config.dev.js里面配置如下：

之所以要在dev.js里面配置的原因是在开发环境下，我们并没有对编写的样式做什么处理，编译过后的样式都会以脚本的形式插入我们的页面当中，在开发环境当然没有什么问题，但是在正式环境里面webpack官网建议是将我们的样式剥离开来，弄成一个单独的css文件。这里贴出官网介绍如下：

故此，我们先安装extract-text-webpack-plugin这个插件，不过这里安装了之后，发现报错了，这是因为我的webpack版本是4，不能在使用这个，extract-text-webpack官方推荐使用这个mini-css-extract-plugin。最后在prod.js里面配置如下：

执行npm run build，我们将会发现在dist目录下多了个hash值的独立css

而在开发环境下，我们随意的写scss的语法也是没有问题的