Javascript 无法使用Web包加载SCS
我正在使用webpack,我想在JavaScript中加载scss文件。(或者如果可以分开,也可以) 这是我的网页配置:Javascript 无法使用Web包加载SCS,javascript,webpack,sass-loader,Javascript,Webpack,Sass Loader,我正在使用webpack,我想在JavaScript中加载scss文件。(或者如果可以分开,也可以) 这是我的网页配置: "use strict"; const CopyWebpackPlugin = require('copy-webpack-plugin'); const path = require('path'); module.exports = { context: __dirname + '/src', entry: './js/index.js', ou
"use strict";
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
module.exports = {
context: __dirname + '/src',
entry: './js/index.js',
output: {
path: './build',
filename: 'js/app.bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
resolve: {
root: [
path.resolve('./src/js'),
path.resolve('./src/scss')
],
extensions: ['', '.js']
},
plugins: [
new CopyWebpackPlugin([
{ from: 'html/**', to: `${__dirname}/build/html`, flatten: true },
{ from: 'images/**', to: `${__dirname}/build/image`, flatten: true }
])
]
};
这是我的文件列表:
- src/html/index.html->build/html/index.html(已完成)
- src/images/**->build/images/**(已完成)
- src/js/index.js->build/js/app.bundle.js(已完成)
- src/scss/**->build/css/**(未工作)
import "babel-polyfill";
import React from 'react';
import ReactDOM from 'react-dom';
import moduleA from 'moduleA';
import "view/startup.scss";
ReactDOM.render(
<div>
<h1>Helloworld!</h1>
</div>,
document.getElementById('entry')
);
错误指向原因(我强调了相关部分): Loader/Users/../Desktop/work/my project/app/node_modules/css/index.js中的错误未返回函数@。/scss/view/startup.scss 4:14-123 在Webpack中声明加载程序时,如果没有其他模块可能与无后缀加载程序名称匹配,则可以省去
-loader
后缀(因此css loader
变为css
)
这就是它在您的情况下失败的地方,因为您也使用了该包,而Web包试图将其用作加载程序(但失败了,因为它不是)
要解决此问题,请使用完整加载程序包名称:
loaders : [ "style-loader", "css-loader", "sass-loader" ]
/scss/view/startup.scss中有什么?@Nobert只是简单的scss代码。我需要写吗?@Nobert问题更新:)谢谢robertklep!你救了我的命!:)
loaders : [ "style-loader", "css-loader", "sass-loader" ]