webpack - Vue js 和 scss 或 Sass

Question

我更喜欢重构，所以在与我的 html 相同的文件中使用样式让我感到厌烦。

我不想使用 <style> html 标签充满了 css，在每个组件中与我的功能和方法交织在一起。

我想继续使用 sass 或 scss 文件。 (我自己的单个文件 + bootstrap 和我在网上获取的其他通用 scss 文件)。

我该怎么做？

我试过了:

import Vue from 'vue'
import App from './App'
import router from './router'
import './assets/scss/App.scss' <- this is the line I added that broke the app.

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

在我的 main.js 中

但是我得到了一个 404 错误:

更新:

看了这个:What is the difference between linking stylesheets and requiring them in Webpack + VueJs?好奇我是否应该改用链接？我试过了，但我不知道应该把它放在哪里。

我应该说明我是从这个脚手架开始的:https://github.com/vuejs/vue-cli

第二次更新:

我一直在关注指南:https://medium.com/@mahesh.ks/using-sass-scss-in-vue-js-2-d472af0facf9

Answer 1

有一种不太流行的(并且由于某种原因没有很好地记录)在单文件组件中包含链接的方法:

</script>

<style src="./assets/scss/App.scss"></style>
<style>
  /* Your component styles go here */
</style>

在我看来，简单有效! :)

编辑:我应该提一下，由于 Webpack 必须加载此文件，因此在使用 vue-cli 进行设置时，您应该选择“使用 Sass”选项。

编辑 2:使用内置 Sass/SCSS 支持从头开始设置项目的步骤:

• 在您要放置新项目的目录中，运行:vue init webpack-simple 你的目录名
• 仔细按照提示操作，注意第四个选项(在author 之后)询问“使用 sass？(是/否)”
• 输入y
• 你的项目现在已经为 webpack 配置了 sass! :)

如果您忘记为现有项目执行此操作，您可以从这里作弊:

https://github.com/vuejs-templates/webpack-simple/blob/master/template/webpack.config.js

rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        'scss': 'vue-style-loader!css-loader!sass-loader',
        'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
      }
    }
  },