vue-cli生成的项目,main.js引入scss时报错

cherry_M
  • 72

首先,生成以后一行都没改,就引入,然后报错
报错信息:

 ERROR  Failed to compile with 1 errors                                                                                                                                15:04:40

This relative module was not found:

* ./assets/css/style.scss in ./src/main.js

代码如下,路径没问题:

import './assets/css/style.scss'
回复
阅读 11.4k
12 个回答

新版本的vue-cli已经帮我们把sass-loader配置好了,放在了util.js里面。
原来我们需要在webpack.base.config.js中去配置以下这段代码:

{
    test: /\.scss$/,
    use: [
        {
            loader: 'style-loader' // creates style nodes from JS strings
        },
        {
            loader: 'css-loader' // translates CSS into CommonJS
        },
        {
            loader: 'sass-loader' // compiles Sass to CSS
        }
    ]
}

现在不需要这样配置。如果这样配置会报错,因为配置重复了。
所以,只需要安装相应的loader,比如使用sass需要安装node-sasssass-loader

脚手架虽然有配置sass,配置记得没错的话应该在build/utils.js,但对应的loader可能未安装,您在package.json看一下有没有sass-loader,如果没有请执行以下命令:

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

缺少sass-loader,为什么还要安装node-sass,因为sass-loader源码里有依赖node-sass,在这里需要的注意的node-sass经常安装会出错,可以用cnpm,或者多安装几次。

必须要手动去安装的!
npm install --save-dev node-sass
npm install --save node-sass
npm install --save-dev sass-loader

可以试试看

clipboard.png

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

clipboard.png

新版的vue-cli中的webpack.base.config.js 不需要再配置sass-loader了,如果是旧版的配置了loader,你可以删除了再启动项目试试。

scss-loader 是vue-cli不自带的 以前也不自带的 它需要自己手动去安装

可以在app.vue的style里用@import引入公共样式。另外如果构建项目的时候没有选择使用sass,需要你自己安装sass-loader然后去配置一下

我也遇到了同样的问题,估计是因为v-cli升级有变化造成的,以前都挺好的

main.js是入口文件,而此时的vue并没有实例化,因为官方的配置都放到vue-loader里面,所以没实例化就引入scss那是不行的

提供一个思路:1、安装相应的sass的loader。2、在webpack.config.js中设置相应的配置,即所有的.scss文件都用sass-loader来编译;文件在main.js中引入没问题。

1、根据控制台提示安装相应的loader,webpackwebpack配置文件不需要增加多余配置
2、vue文件里面的style标签记得增加lang = "scss"属性

这是因为没有安装sass的工具,安装一下就好了

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

你知道吗?

宣传栏