Question

我是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以dev模式运行项目时，我发现每次加载路由组件时，在索引页面上，每个路由都会复制main.scss的所有内容的标记样式。

我该如何避免呢？

我应该在哪里放scss导入才能按时包含它？我应该将路由包装在顶级组件中吗？（这看起来很复杂......）

我应该采用不同的方法吗？（我已经使用了很长时间的咕噜声/角度，也许我正试图移植一个不适合这个工具的模式......）

Answer 1

您需要安装这些模块/加载器：
- CSS-装载机
- SASS装载机
- 节点SASS
- 提取物的文本的WebPack-插件
在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。

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

import 'path/to/app.scss'

最后，您需要在index.html：

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

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

希望你会发现它提供了丰富的信息。：）

Vue.js适当的vue-router样式

1 个答案: