Vue js 和 scss 或 Sass

Posted 2023-02-22

【中文标题】Vue js 和 scss 或 Sass

【英文标题】：Vue js and scss or Sass

【发布时间】：2018-04-05 01:06:49

【问题描述】：

我更喜欢重构，所以在与我的 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

【问题讨论】：

“require('./assets/scss/App.scss')”有效吗？

@Wouter no :( ...

两者对我来说都很好，无法重现：l（我也使用了 vue-cli）

查看更新的 OP，如果知道我从哪里开始有帮助，请告诉我。

SACC 或 SCSS 文件需要编译器，你将如何在运行时编译它们？

【参考方案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'
      
    
  ,

【讨论】：

太接近了！！！！是的！我确实忘记这样做了。即使使用有用的代码，它仍然无法加载我的 scss。这是我的 build/webpack.base.conf.js ：pastebin.com/GAgwR0Ha 为此我做了很多事情：我的 package.json 得到了 "dependencies": "vue": "^2.5.2", "vue-router": "^3.0.1", "node-sass": "^4.5.3", "sass-loader": "^3.2.3", "style-loader": "^0.19.0", "extract-text-webpack-plugin": "^3.0.1" , "devDependencies": "sinon": "^4.0.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.3", "vue-loader": "^13.3.0"

但是您在“使用 sass”的设置过程中谈到的一个简单选项听起来很棒！我想要那个选项。如何以一种让我遇到此提示的方式从头开始？

我编辑了我的答案，所以它比评论更容易阅读（涉及语法突出显示）

【参考方案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 模板）。

希望对您有所帮助！

【讨论】：

听起来不错，问题是我链接的脚手架的加载程序没有开始处理 scss 文件。我将如何升级它？我在这里有一个***：***.com/questions/46914294/…