webpack sass to css 指定具体文件夹？

Question

我一直在查看文档并检查其他人的问题，但我找不到如何将我所有的 sass 编译成一个简单的 css 文件并指定的简单答案我希望生成的 css 文件输出到的目录。

快速上下文：我有一个 public 目录，里面有一个样式表目录和一个构建目录。 webpack 将应用程序编译到构建中，我想让 sass 编译 style.css 到样式表目录中。

这是我的 public 目录的屏幕截图：

我希望能够在我的 webpack.config.js 中执行类似的操作（为简洁起见，仅显示相关代码）：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

...

// To be called in plugins:
const cssOutput = new ExtractTextPlugin('./public/stylesheets/style.css');

内部模块加载器：

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

在插件中：

  plugins: [
    .
    .
    .
    cssOutput,
  ],

我希望能够使用位于 public 目录的 index.html 文件中的这一行访问输出文件：

  <link rel="stylesheet" href="/stylesheets/style.css" />

我目前正在使用 gulp 执行此操作并且工作正常，我只是想将所有内容转换为 webpack。任何帮助将不胜感激！

Answer 1

你看过https://www.npmjs.com/package/extract-text-webpack-plugin了吗？你可能会需要它。

Answer 2

原来你可以像这样设置输出文件：

const cssOutput = new ExtractTextPlugin('../stylesheets/style.css', { allChunks: true });

我犯了忘记添加的菜鸟错误：

require('_scss/style.scss');

在我的 index.jsx 文件中。

对于遇到此问题的任何人，我仍然遇到字体和图像方面的问题，因此在 webpack.config.js 的模块加载器中我必须添加：

  {
    test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
    loader: 'file',
  },

因为这会将所有内容输出到我的构建目录中，所以我只是将 css 更改为输出构建目录中的所有内容，以防止路径错误。我将其更改为：

const cssOutput = new ExtractTextPlugin('style.css', { allChunks: true });

希望这对遇到此类问题的其他人有所帮助！

Answer 3

为我工作::

webpack.config.js

module.exports = {
   entry: ['./src/app.ts', './src/sass/style.scss'],
   module:{
          rules: [
          {
            test: /\.ts$/,
            use: 'ts-loader',
            include: [path.resolve(__dirname, 'src', 'src/class')]
          },
          {
            test: /\.scss$/,
            use: [
            {
              loader: 'file-loader',
              options: {
                name: '/css/[name].css'
              }
             },
             {
               loader: 'extract-loader'
             },
             {
               loader: 'css-loader?-url'
             },
             {
               loader: 'postcss-loader'
             },
             {
               loader: 'sass-loader'
             }
           ],
           include: [path.resolve(__dirname, 'src/sass')]
         }
     ]
 },
 output: {
     filename: 'js/app.js',
     path: path.resolve(__dirname, 'public')
  }
}

postcss.config.js

module.exports = {
 plugins: {
    'autoprefixer': {}
 }
}

package.json

{
  "name": "tsscript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "nov": "webpack",
  "test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
  "autoprefixer": "^9.8.5",
  "css": "^3.0.0",
  "css-loader": "^3.6.0",
  "extract-loader": "^5.1.0",
  "postcss-loader": "^3.0.0",
  "sass": "^1.26.10",
  "sass-loader": "^9.0.2",
  "style-loader": "^1.2.1",
  "ts-loader": "^8.0.0",
  "typescript": "^3.9.6",
  "webpack": "^4.43.0",
  "webpack-cli": "^3.3.12"
 }
}

Directory Snap:

Answer 4

最近的解决方案，您可以使用 mini-css-extract-plugin, css-loader, and sass-loader. mini-css-extract-plugin 可以为每个包含 CSS.

的 JS 文件创建一个 CSS 文件

安装依赖项：

npm i -D mini-css-extract-plugin css-loader sass-loader

例如，包含样式的主 JS 文件是 ./src/index.js:

...
import './src/style.scss';
...

配置webpack.config.js:

...
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  ...
  entry: {
    main: './src/index.js',
  },
  plugins: [
    new MiniCssExtractPlugin(),
  ],
  ...
  module: {
    rules: [
      ...
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader",
        ],
      },
      ...
    ]
  },
  resolve: {
    modules: ["node_modules", path.resolve(__dirname, "src")],
    extensions: ['.js', '.scss', ...]
  }
}

然后，你可以查看你的输出目录，会有main.css。该插件将默认名称设置为 [name].css（条目名称）。

webpack sass to css 指定具体文件夹？

Webpack sass to css specify a specific folder?

sass

webpack

sass-loader