Question

我一直在学习如何使用webpack设置reactjs项目。

所以我试图让这个项目000-landing-page运行webpack配置。我想使用extract-text-webpack-plugin。

但是在css文件中有import语句;

@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900";
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";

这些行会导致错误

“意外字符@您可能需要一个合适的加载器来处理此文件类型为“

实际上异常很明显，但我找不到合适的加载器。我已经安装了html，文件，url加载器并尝试了一些配置，但无法完成它。

这些是我的css和scss加载器

 {
          test: /\.css$/,
          include: [ path.resolve(__dirname, "/node_modules/")],
          loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
           loader: [
           'css-loader',
            'postcss-loader',
          ],
          })
        },
        {
            test: /\.scss$/,
            include: [ path.resolve(__dirname, "/node_modules/")],
            loader: ExtractTextPlugin.extract({
            fallbackLoader: 'style-loader',
             loader: [
               'postcss-loader',
               'sass-loader',
             'css-loader',
            ],
            }),
        }

Answer 1

我理解装载机顺序是从右到左。这将使scss的loader数组成为：

['css-loader', 'postcss-loader', 'sass-loader']

这是因为它本质上是一个组合函数，即 css(postcss(sass(file)))

Answer 2

它与@symbol无关。由于是webpack的初学者，我错过了一点点。

如果使用include包含任何内容：[]则表示包含所有文件

如果使用include包含某些内容：[file x]则表示除文件x以外的所有文件。

因为我添加了“include：[path.resolve（__ dirname，”/ node_modules /“）]，”它只包含node_modules而不是我的src文件夹。

Webpack 2如何处理@import语句？

2 个答案: