1.使用淘宝镜像安装sass依赖包
$ cnpm install sass-loader node-sass vue-style-loader --D
2.打开
build文件夹下面的webpack.base.config.js,修改module为:
3. 在需要用到sass的地方添加lang=scssmodule: { 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]') } }, { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"] } ] }
<style lang="scss" scoped="" type="text/css"> //你的sass语言 $primary-color: #333; body { color: $primary-color; //编译后就成了 color:#333;类似于js的变量! } </style>原文链接:http://www.jianshu.com/p/8e60048baeb7 來源:简书