Webpack 2如何处理@import语句？

我一直在学习如何使用webpack设置reactjs项目。Webpack 2如何处理@import语句？

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

但在css文件中有导入语句;

@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', 
      ], 
      }), 
     }

来源

2016-11-27 Burak Karasoy

如果您删除导入，它工作吗？ – QoP

不，它表示意外的标记，您可能需要一个合适的加载器来处理这种文件类型（这次没有@import）。你可以看看这里的CSS文件.https：//github.com/fullstackreact/react-daily-ui/blob/master/003-landing-page/src/App.css –

当我删除包括：[ path.resolve（__ dirname，“/ node_modules /”）]，它的工作原理。但导致错误的app.css不在节点模块中，而是在src目录中（单独的文件夹）。这很奇怪 –

它有无关@symbol。由于担任webpack的初学者，我错过了一个小点。

如果不使用包括有：[]这意味着每一个文件都包含

如果事情是使用包括包括：文件X]这意味着除了包含文件X的任何文件。

，因为我加入“包括：[path.resolve（__目录名， ”/ node_modules /“）]，” 它只包括node_modules不是我的src文件夹。

来源

2016-12-04 18:55:49

我明白装载机顺序是从右到左。这将使加载器阵列的SCSS是：

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

这是因为它本质上是一个组合功能，即

来源

2016-11-27 22:27:20 Skiing

Webpack 2如何处理@import语句？

回答

相关问题