Question

我正在使用webpack和sass-loader在我的公共目录中生成custom.css文件。我的webpack.config文件包含以下内容：

// webpack.config.js

var ExtractTextPlugin = require("extract-text-webpack-plugin");

...

if(process.env.NODE_ENV === 'development'){
  var loaders = ['react-hot','babel']
} else {
  var loaders = ['babel']
}
module.exports = {
  devtool: 'eval',
  entry: './app-client.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js',
    publicPath: '/dist/'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: loaders,
      exclude: /node_modules/
    },
    // Extract SCSS
    **{ test: /\.scss$/,
      loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader") },]**,
    include: __dirname + '/src/sass'

  },
  plugins: [
    new ExtractTextPlugin("./public/css/style.css", {allChunks: false})

 ]
};

在.views / index.html文件中调用css：

<link href="/css/custom.css" rel="stylesheet">

我的package.json中的开发脚本是：

    "webpack-dev-server": "NODE_ENV=development PORT=8080 webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback",
    "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && npm run webpack-dev-server"

在./components/App.js我有：

//stylesheets import scss from 'custom.scss'

但是我收到以下错误：

RROR in ./components/App.js
Module not found: Error: Cannot resolve module 'custom.scss' in /Users/koko1/apps/bamba-2017/components
 @ ./components/App.js 38:18-40

Answer 1

我假设没有创建任何内容，因为extract-text-webpack-plugin并未将link个文件中的html转换为单独的css。它将条目块中的每个require('any-file-name.scss')（在您的配置案例中）移动到单独的scss文件中。

Answer 2

好的，我有这个工作，所以这里发生了什么：

我的extract-text-webpack-plugin版本不符合它的webpack版本依赖关系（UNMET PEER DEPENDENCY webpack@1.12.6）
我升级到"webpack": "^2.2.1"并且不断收到一些晦涩难懂的错误，特别是这个错误： /node_modules/loader-runner/lib/loadLoader.js:35 throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");

这意味着无论何时在webpack.config.js中使用webpack 2中的加载器，都需要指定它是一个加载器。如下所示：

loaders: ['style', 'css']

会抛出错误，需要更正为：

loaders: ['style-loader', 'css-loader']

另一件事是当您创建ExtractTextPlugin插件实例时，请指定输出文件的文件名：

new ExtractTextPlugin({ filename: 'css/[name].css', disable: false, allChunks: true })

完成上述所有操作并将//stylesheets require('../src/sass/test.scss');添加到我的App.js文件后，现在可以在正确的public / css / test.css文件中创建css。

如果有人能想出更好的选择，请告诉我。

extract-text-webpack-plugin没有创建样式表

2 个答案: