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 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'
      }
    }
  },

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 模板）。

希望对您有所帮助！