Vue js和scss或Sass

Question

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

我不想使用填充了css的<style>个html标签与我的函数＆amp;每个组成部分的方法。

我想继续使用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必须加载这个文件，所以你应该选择＆＃34;使用Sass＆＃34;使用 vue-cli 设置时的选项。

编辑2 ：通过内置Sass / SCSS支持从头开始设置项目的步骤：

• 在您要放置新项目的目录中，运行： vue init webpack-simple your-dir-name
• 仔细按照提示 并注意第四个选项（在author之后）询问＆＃34;使用sass？ （Y / N）＆＃34;
• 输入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'
      }
    }
  },

Answer 2

不是在javascript部分导入，而是将其切换为从css部分导入...我知道你：

  

我不想使用html标签。

但我认为你的意思是你想要compiled css而不是普通的CSS。你可以这样试试：

<style lang="sass">
    @import '../assets/scss/App.scss';

    .others_css_classes {
      ...
    }
 </style>

并在build/wepack.base.conf.js配置文件中添加部分：

{ 
   test: /\.scss$/, 
   loaders: [ 'style-loader', 'css-loader', 'sass-loader' ] 
 },

这是您分享的link的混合，我提取了here的一部分

如果你从vue-cli安装了Vue，你应该（自动）在/ build中安装webpack（如果你使用官方的webpack模板）。

希望它有所帮助！