Question

我正在使用webpack，我可以“导入”css文件而不会出错，但css不会导出到最终产品中。

Webpack摘录：

 module: {
    loaders: [
      {test: /\.css$/,loader: 'css-loader'},
      {test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')},
      {test: /\.js$/, loader: 'babel-loader', include},
      {test: /\.json$/, loader: 'json', include},
      {test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
    ]
  },

执行命令

npm install hopscotch

代码：

import 'hopscotch/dist/css/hopscotch.css';

Answer 1

我没有将提取物用于css文件......

{test: /\.css$/,loader: 'css-loader'},

应该是：

{test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')},

Answer 2

除了你的答案，你还需要将ExtractTextPlugin添加到plugins数组，以定义导出提取的CSS的位置。

module: {
  loaders: [
    {test: /\.css$/,loader: ExtractTextPlugin.extract('css-loader')},
    {test: /\.scss$/,loader: ExtractTextPlugin.extract('css-loader!sass-loader')},
    {test: /\.js$/, loader: 'babel-loader', include},
    {test: /\.json$/, loader: 'json', include},
    {test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
  ]
  plugins: [
    new ExtractTextPlugin({ filename: 'style.css' }),
  ],
},

从节点js模块导入css

2 个答案: