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

Question

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

新的 vue 组件：

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

我想我想念要安装的库或什么。任何帮助将非常感激。

Answer 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