使用 vue js 2 导入新的 scss 文件

【问题标题】：Import new scss file using vue js 2使用 vue js 2 导入新的 scss 文件
【发布时间】：2018-02-26 11:59:40
【问题描述】：

我在将新的 .scss 导入到与主 scss 文件不同的全新页面模板 vue 时遇到问题。我找到了这个link，但我的新样式仍然不起作用。顺便说一下，我用的是 laravel 5.4。

新的 vue 组件：

<style lang="scss" scoped>
   @import "~sass/new"; //new scss file from resources/sass directory
</style>

我想我想念一个要安装的库或什么。任何帮助将不胜感激。

【问题讨论】：

标签： laravel vuejs2

【解决方案1】：

检查你是否安装了 'sass-loader' 'node-sass' 'style-loader'

如果没有，则使用以下命令安装它

npm install sass-loader node-sass style-loader --save-dev

看看你的package.json是不是和这个类似

"devDependencies": {
    "css-loader": "^0.23.1",
    "node-sass": "^4.1.1",
    "sass-loader": "^3.2.3",
    "style-loader": "^0.13.1"
    "vue-loader": "^9.0.0",
    "vue-router": "^2.1.1",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
}

那你可以试试

<style lang="scss" scoped>
  @import 'main.scss'
</style>

这篇文章一定对你有帮助Using SASS/SCSS in Vue.js 2

【讨论】：

这很奇怪，删除 scoped 属性后它现在可以工作了。