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

Question

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

 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'

Answer 1

新版本的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-sass、sass-loader。

Answer 2

脚手架虽然有配置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，或者多安装几次。

Answer 3

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

可以试试看

Answer 4

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

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

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

Answer 12