我正在使用webpack,我想在我的JavaScript中加载scss文件。(或者如果可以分开,也可以)。
这是我的webpack配置:
"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 }
])
]
};
这是我的文件列表:
这是我的JavaScript代码。我刚刚开始项目,因此没有太多代码:
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')
);
您可以看到以下内容:import“ view / startup.scss”; 我想将scss文件加载到我的JavaScript中,但是当我运行webpack命令时,它说:
加载程序/Users/.../Desktop/work/my-project/app/node_modules/css/index.js中的错误未返回函数@ ./scss/view/startup.scss 4:14-123
在webpack config的“ resolve”属性中,您可以看到我为scss添加了另一个根目录,也加载了sass-loader,但是它不起作用,我也不知道为什么。
据我所知,使用Webpack时,包括css / scss在内的文件会自动注入到目标文件中,因此,不必将其提取为单独的文件也没关系,我只希望它能起作用。
任何帮助将不胜感激:)
*更新* ./scss/view/startup.scss的代码
#startup {
background-color: #7087d7;
}
错误指向原因(我着重强调了相关部分):
加载程序/Users/.../Desktop/work/my-project/app/node_modules/ css / index.js中的错误未返回函数@ ./scss/view/startup.scss 4:14-123
在Webpack中声明加载程序时,如果没有其他可能与无后缀加载程序名称匹配的模块,则可以省略-loader
后缀(css-loader
变为css
)。
这就是您失败的地方,因为您还使用了css
Webpack尝试将其用作加载程序的软件包(并且失败了,因为不是)。
要解决此问题,请使用完整的加载程序包名称:
loaders : [ "style-loader", "css-loader", "sass-loader" ]
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句