Question

我想使用与我的每个react组件一起组织的sass样式表，如下所示：

  components/
  |- componentOne
     |- componentOne.js 
     |- componentOne.scss
  |- componentTwo
     |- componentTwo.js 
     |- componentTwo.scss
  |- componentThree
     |- componentThree.js 
     |- componentThree.scss

是否有任何Webpack设置/工具可以自动加载并编译特定目录中的所有.scss文件？

编辑：

因此，以下是我正在使用的当前Webpack配置（由以前的开发人员编写）。我在SRC_DIR + "/app/components/",条目的行中添加了内容，以便extract-text-webpack-plugin将提取components目录中的所有.scss文件。但是，当我尝试运行构建时，出现以下错误消息。我究竟做错了什么？谢谢。

ERROR in multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css
Module not found: Error: Can't resolve '/Users/user123/dev/project/src/app/components/' in '/Users/user123/dev/project'
 @ multi babel-polyfill ./src/app/index.js ./src/app/assets/stylesheets/application.scss ./src/app/components/ font-awesome/scss/font-awesome.scss react-datepicker/dist/react-datepicker.css rc-time-picker/assets/index.css react-circular-progressbar/dist/styles.css @trendmicro/react-toggle-switch/dist/react-toggle-switch.css

Webpack配置：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const DIST_DIR = path.resolve(__dirname, "dist");
const SRC_DIR = path.resolve(__dirname, "src");

const config = {
  entry: [
    "babel-polyfill",
    SRC_DIR + "/app/index.js",
    SRC_DIR + "/app/assets/stylesheets/application.scss",
    SRC_DIR + "/app/components/",
    "font-awesome/scss/font-awesome.scss",
    "react-datepicker/dist/react-datepicker.css",
    "rc-time-picker/assets/index.css",
    "react-circular-progressbar/dist/styles.css",
    "@trendmicro/react-toggle-switch/dist/react-toggle-switch.css",
  ],
  output: {
    path: DIST_DIR + "/app/",
    filename: "bundle.js",
    publicPath: "/app/"
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
    hot: true,
    proxy: {
    '/api': {
        target: 'http://localhost:5001',
        secure: false,
    },
}
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          failOnWarning: false,
          failOnError: true
        }
      },
      {
        test: /\.js$/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'stage-2']
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: 'css-loader?importLoaders=1',
        })
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract(['css-loader', 'sass-loader']),
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 7,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: path.resolve(__dirname, "node_modules"),
        include: __dirname,
      },
      {
        test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        // loader: "url?limit=10000"
        use: "url-loader"
      },
      {
        test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
        use: 'file-loader'
      },
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "application.css",
      allChunks: true
    })
  ]
};

module.exports = config;

Answer 1

为了编译您的scss，webpack必须对此有所了解。为了让他知道，您只需将这些scss文件导入当前组件中即可。

现在，您要做的就是配置webpack。您将使用sass-loader，css-loader和style-loader。

module.exports = {
    entry: './src/',
    module: {
        rules: [
            {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
            }
        ]
    }
}

这是可以完成的最基本的配置。

如果您想将CSS编译为文件，只需使用Mini-css-extract-plugin

Answer 2

module: {
    {
        test: /\.scss$/,
        loaders: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.less$/,
        loaders: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader'
        ]
      },
    },
},
resolve: {
    extensions: [ '.css', '.scss'],
}

在React组件文件夹中编译SASS文件

2 个答案: