Vue.js 正确的 vue-router 样式答案

【问题标题】：Vue.js proper vue-router stylingVue.js 正确的 vue-router 样式
【发布时间】：2017-12-17 02:26:29
【问题描述】：

我是 vue/webpack 新手，在使用 vue-routing 的项目中找不到合适的方式来使用 scss 文件。

这是项目结构：

/src
  /routes
    route1.vue
    route1.js
    route2.vue
    route2.js
    ...
  /scss
    main.scss
    mixins.scss
    route1.scss
    route2.scss
    ...
  main.js
index.html

route1.vue（和route2，脚本src除外）的代码是：

<template>
  <div id="header">
    <div class="title">{{title}}</div>
  </div>
</template>

<script src="./route1.js"></script>

<style lang="scss">
  @import "../scss/main";
</style>

main.js 管理路由（见教程）

当我通过 webpack 在开发模式下运行项目时，我发现每次加载路由组件时，在索引页面上，每个路由都会复制带有 main.scss 的所有内容的标记样式。

如何避免？

我应该将 scss 导入放在哪里以仅按时包含它？我应该将路由包装在*组件中吗？（这似乎很复杂......）

我应该使用不同的方法吗？（我已经使用了很长时间的 grunt/angular，也许我正在尝试移植一个不适合这个工具的模式......）

【问题讨论】：

首先确保你安装了正确的 Webpack 加载器。阅读this 指南。然后在.js 文件之一中使用@import，例如main.js。最后在您的index.html 中添加一个链接到创建的样式文件。
感谢您的回复，实际上我在阅读该指南后问了这个问题，主要是因为我不理解它并且它没有全面介绍使用 css 预处理器的管道.关于消息的第二部分，@import 是指在 javascript 中导入 scss 资源吗？关于index.html，链接应该指向哪里？
好的，我会尝试通过发布完整答案来澄清这一点。

标签： webpack sass vue.js

【解决方案1】：

您需要安装这些模块/加载器：
- css 加载器
- sass 加载器
- 节点-sass
- extract-text-webpack-plugin
在webpack.config.js 添加这些：

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 在module.exports = {...} 之前

然后在rules[]中定义这两条规则：

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('css-loader')
  },
  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract('css-loader!sass-loader')
  }

然后，在module: {...} 末尾添加：

plugins: [
  new ExtractTextPlugin('style.css')
],

这就是 webpack 配置的内容。

现在您必须将您的 scss 规则写入一个文件，例如 app.scss。

通过将导入语句放入您的.js 文件之一来导入该文件，例如main.js：

import 'path/to/app.scss'

最后，您需要引用index.html中的样式表文件：

<link rel="stylesheet" href="/dist/style.css">

现在，当您使用 webpack 构建项目时，它会将您的 scss 规则转换为 css 并将样式表放入 dist/style.css

希望您会发现它提供的信息。 :)

【讨论】：