sass 在vue中报错

Question

vue文件：
<style scoped lang="scss">
@import '~scss_vars';
</style>
错误提示：
      File to import not found or unreadable: ~scss_vars.
Parent style sheet: stdin
      in D:\vue\mock\src\views\Home.vue (line 79, column 1)
      
package.json:
"file-loader": "^1.1.5",
    "mockjs": "^1.0.1-beta3",
    "node-sass": "^4.6.0",
    "sass-loader": "^6.0.6",

我已经安装了sass 为什么会报错

Answer 1

如果你要这么写就需要在webpack里配置resolve 如果你用的vue-cli的话就是在webpack.base.config.js里配置

resolve: {
    extensions: ['.js', '.vue', '.json', '.scss'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'scss': path.resolve(__dirname, '../src/style'),
    }
  }

这个样式根路径，如果指定某个文件就要在别名里指定即可

Answer 2

看起来是没识别'~scss_vars'这种写法

Answer 3

这是用webpack打包编译时指代当前项目下node_modules包里的样式文件，只在样式文件@import时这么用。
需要知道指向到文件

@import '~scss_vars'; /* node_modules/scss_vars.scss 此文件应该不存在吧 */
@import '~scss_vars/src/.../style.scss';