vue-cli生成的項目，main.js引入scss時報錯

首先，生成以后一行都沒改，就引入，然后報錯
報錯信息：

 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'

回答

編輯回答

假灑脫

1、根據控制臺提示安裝相應的loader，webpackwebpack配置文件不需要增加多余配置
2、vue文件里面的style標簽記得增加lang = "scss"屬性

2018年4月25日 04:07

編輯回答

淚染裳

2017年12月9日 18:48

編輯回答

刮刮樂

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

新版的vue-cli中的webpack.base.config.js 不需要再配置sass-loader了，如果是舊版的配置了loader，你可以刪除了再啟動項目試試。

2017年12月4日 19:33

編輯回答

巫婆

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

2017年4月6日 22:39

編輯回答

妖妖

scss-loader 是vue-cli不自帶的以前也不自帶的它需要自己手動去安裝

2017年7月5日 22:36

編輯回答

骨殘心

可以在app.vue的style里用@import引入公共樣式。另外如果構建項目的時候沒有選擇使用sass，需要你自己安裝sass-loader然后去配置一下

2017年1月13日 13:57

編輯回答

蟲児飛

必須要手動去安裝的！
npm install --save-dev node-sass
npm install --save node-sass
npm install --save-dev sass-loader

可以試試看

2017年9月22日 06:44

編輯回答

尐潴豬

我也遇到了同樣的問題，估計是因為v-cli升級有變化造成的，以前都挺好的

2018年8月31日 04:24

編輯回答

尛曖昧

提供一個思路：1、安裝相應的sass的loader。2、在webpack.config.js中設置相應的配置，即所有的.scss文件都用sass-loader來編譯；文件在main.js中引入沒問題。

2017年5月31日 07:07

編輯回答

舊顏

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

2017年11月14日 23:06