webpack加载scss问题

Question

配置

package.json部分

    "vue-style-loader": "^1.0.0",
    "sass-loader": "^4.1.1",
    "node-sass": "^4.3.0",
    "css-loader": "^0.25.0",

webpack部分

var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd

 loaders: [{
                test: /\.vue$/,
                loader: 'vue'
            },
      
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
                    // loader: ExtractTextPlugin.extract("style", 'css!sass')
            }
        ]
        
        vue: {
        loaders: utils.cssLoaders({
            sourceMap: useCssSourceMap,
            sass: "css!sass"
        }),
        postcss: [
            require('autoprefixer')({
                browsers: ['last 2 versions']
            })
        ]
    }

页面加载

import './assets/scss/main.scss'

报错

 ERROR  Failed to compile with 1 errors

This dependency was not found in node_modules:

* ./assets/scss/main.scss

Did you forget to run npm install --save for it?

Answer 1

            {
                test: /\.scss$/,
                loader: 'style!css!sass'
                    // loader: ExtractTextPlugin.extract("style", 'css!sass')
            }
        
        vue: {
        loaders: utils.cssLoaders({
            sass: "css!sass"
        }),

把以上代码去掉就行

Answer 2

package.json里面的依赖模块都安装了吗，看提示是报的这个错

Answer 3

在你的webpack配置resolve
'assets': resolve('src/assets')

然后以下面方式引入：
@import '~assets/scss/main';

就可以