sass 在vue中报错

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 为什么会报错

阅读 3.8k
评论
    3 个回答
    • 1.4k

    如果你要这么写就需要在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'),
        }
      }

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

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

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

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

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章