Vue js和scss或Sass

Question

我更喜欢重构,所以在同一个文件中有样式,因为我的html让我烦恼.

我不想使用<style>填充了css的html标签,这些标签与我的每个组件中的函数和方法交织在一起.

我想继续使用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错误:

更新:

看看这个:在Webpack + VueJs中链接样式表和要求它们有什么区别？好奇我是否应该切换到使用链接？我尝试过,但我不知道应该把它放在哪里.

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

第二次更新:

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

Answer 1

不要在javascript零件中导入它，而是将其切换为从css零件导入...我知道您：

我不想使用 html 标签。

但我假设你的意思是你想要compiledcss 而不是普通的 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' ] 
 },

这是你分享的链接的混合，我提取了一部分这里

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

希望能帮助到你！

Answer 2

在单文件组件中包含链接的方式不太流行(并且无论出于何种原因没有详细记录):

</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 your-dir-name
• 仔细按照提示操作并注意第四个选项(后author)询问"使用sass？(y/N)"
• 输入 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'
      }
    }
  },