1

我正在使用 webpack 和 sass-loadercustom.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
4

2 回答 2

0

好的，我得到了这个工作，所以这就是发生的事情：

  1. 我的版本extract-text-webpack-plugin不符合它的 webpack 版本依赖（UNMET PEER DEPENDENCY webpack@1.12.6）

  2. 我升级到"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']

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

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

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

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

于 2017-02-02T15:57:37.433 回答
0

我假设没有创建任何内容，因为extract-text-webpack-plugin不会将文件link中的 'shtml转换为单独的css. 它将require('any-file-name.scss')入口块中的每个（在您的配置情况下）移动到单独的 scss 文件中。

于 2017-02-02T13:10:08.580 回答