这是我的目录结构:

- public
- src
  - app.js
  - assets
    - images
      - logo-b-green.png 
    - stylesheets
      - nav.scss

和:

// webpack.config.js

module.exports = {
  entry: './src/app.js',
  output: {
    path: './public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: "file-loader?name=images/img-[hash:6].[ext]"
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.json']
  }
};

和:

/* nav.scss */

#nav-logo { …

使用Webpack 2和 sass-loader 4.11

webpack --config webpack.config.js

这是我的webpack.config.js

var path = require('path');
var sass = require("./sass/lifeleveler.scss");

module.exports = {
    entry: './dist/main.js',
    output: {
        filename: 'lifeleveler.app.js',
        path: path.resolve(__dirname, 'dist')
    },
    watch: true,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                include: [
                    path.resolve(__dirname, 'node_modules'),
                    path.resolve(__dirname, './sass')
                ],
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }
        ],
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                use: "source-map-loader"
            }
        ] …

Webpack + file-loader + sass-loader无法解析CSS背景图像的相对路径.

已编译的SCSS文件包含/dist/相对于SCSS/CSS文档而不是相对于SCSS/CSS文档的背景图像的路径.我研究过这个问题; sass-loader建议使用resolve-url-loader(带源映射).但是,添加resolve-url-loader对编译的CSS没有任何区别.

我已经能够通过在文件加载器上将'publicPath'设置为'../ ..'来解决此问题.或者通过禁用css-loader上的"url"设置.两者都不是一个好的解决方案,并且会导致复制文件和通过HTML或其他来源引用图像时出现问题.

Webpack和CSS的在线示例将CSS和图像放在同一个文件夹中(通常在根目录中).这不是我的webpack实现的最佳选择.在子文件夹中构造文件的概念似乎是一个相当基本的要求.这只是错误的做法吗？

运行Webpack ^ 3.5.1.Sass-loader ^ 6.0.6.文件加载器^ 0.11.2.Css-loader ^ 0.28.4.

文件结构

example/
??? dist/
?   ??? assets
?   ?   ??? media
?   ?   ?   ??? logo.png
?   ?   ??? styles
?   ?       ??? app.css
?   ?       ??? app.css.map
?   ??? index.html
?   ??? app.bundle.js
??? src/
    ??? assets
    ?   ??? media
    ?   ?   ??? logo.png
    ?   ??? styles
    ?       ??? app.scss
    ??? app.js

app.scss

body {
  background: url(../media/logo.png);
}

app.css …

在我的reactJS应用程序中 - 我将所有.scss文件包含在一个main.scss文件中 - 在src文件夹中的styles文件夹下.我有以下webpack配置.尝试将main.scss文件直接包含在我的主要组件中 - 在'@import'中获取错误,我导入其他scss文件.如果我包含单独的scss文件样式是好的 - 但如何使用一个main.scss文件以及如何包含它？

错误:预期的意外令牌((1:8)

1 | @import'mycomponent';

module.exports = {
  entry: [
    'webpack-hot-middleware/client',
    path.resolve(__dirname, 'src'),
  ],
  output: {
    path: path.resolve(__dirname, 'src'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  plugins: [
    new ExtractTextPlugin('bundle.css', { allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        WEBPACK: true,
      },
    }),
  ],
  module: {

    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          query: { …

这是我Webpack的scss/css文件配置。

...
{
    test: /\.s?css$/,
    use: [
      'style-loader',
      { loader: 'css-loader', options: { importLoaders: 2 } },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: loader => [
            require('postcss-import')({ root: loader.resourcePath }),
            require('cssnano')(),
            require('postcss-cssnext')(),
          ]
        }
      },
      'sass-loader',
    ]
}
...

问题是，当我使用cssnext类似gray(100)的函数时，输出CSS文件在该函数所在的位置有一个空值。我想知道我在这里做错了什么。

即 background-color: gray(100);输出到background-color: ;

我是 postcss 的新手，所以我真的不知道它是如何工作的，也不知道如何正确配置它。

我正在尝试使用Material-Components-vue和 vue-cli 使用 webpack 创建一个简单的 Web 应用程序，但是，我发现如果没有node_modules前面的~.

我尝试了几个 webpack/vue-cli 配置，最终得到了传递加载器选项的配置vue.config.js。

我的vue.config.js看起来像这样：

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          includePaths: [
              './node_modules', //here I include node_modules
            ]
        },
      }
    }
  }

所以我希望能够导入这样的东西：

@import 'normalize/normalize'

（假设我有一个名为normalizemy 的目录node_modules，其中包含一个文件normalize.scss）

但是，webpack 会抛出错误，表示找不到该模块。
但是，这确实有效：

@import '~normalize/normalize'

如果所有 s 都是我写的，这不会有问题@import，但因为我使用的第三方模块@import里面有 s，所以 webpack 无法编译。

编辑1：

正如@Styx要求的那样

请分享更多配置

和

显示 vuespect --rule scss 的输出，以及带有此问题导入的整个文件

这里是： …

摘要

当我们切换到使用Webpack来处理SASS文件时，我们注意到在某些情况下，构建时间变得非常缓慢。在使用SpeedMeasurePlugin测量了构建的不同部分的性能之后，似乎sass-loader是罪魁祸首……它很容易花费10s来构建（在进行一些修复之前通常花费20s），这比我们更长。 d喜欢。

我很好奇，如果人们还有其他策略可以优化构建我没有涵盖的Sass资产。在这一点上，我已经经历了很多（对于其中一些来说是多次），但似乎仍然无法将构建时间降低得足够低。就目标而言，当前的大规模重建（例如更改许多文件中使用的组件）可能很容易花费10-12秒，我希望尽可能将其降低到5s。

尝试过的解决方案

我们尝试了多种不同的解决方案，其中一些可行，而其他解决方案却无济于事。

• HardSourcePlugin-此工具相当有效。根据该构建的缓存，它能够将构建时间减少几秒钟。
• 删除重复的导入（例如将相同的“ variables.sass”文件导入多个位置）-这也将构建时间减少了几秒钟
• 将我们的SASS和SCSS组合更改为仅SCSS-我不确定为什么这样做有帮助，但似乎确实节省了我们的构建时间。也许因为所有文件都是相同的文件类型，所以更容易编译？（很可能在这里发生了其他事情，以至于混淆了结果，但似乎确实能持续地提供帮助）。
• 用fast-sass-loader代替sass- loader-很多人都建议这样做，但是当我开始使用它时，它似乎根本没有改变构建时间。我不确定为什么……也许有配置问题。
• 利用缓存加载器 -这似乎也没有任何改善。
• Sass的禁用源地图-这似乎产生了很大的影响，将构建时间减少了一半（从应用更改时开始）
• 尝试includePaths用于从node_modules加载的SASS-在我发现的git问题上建议使用此方法，在该问题上sass-loader遇到了称为“自定义进口商”的问题。我的理解是，通过使用includePaths，SASS能够依靠那些提供的绝对路径，而不是使用效率低下的算法来解析路径到诸如node_modules的位置

从一些简要的统计数据来看，我们似乎在150个SASS文件中散布了约1.6万行SASS代码。有些文件的代码量很大，而其他代码的代码量却很少，这些文件的LOC平均值约为107 LOC /文件。

以下是正在使用的配置。该应用程序是Rails应用程序，因此许多Webpack配置都是通过Webpacker gem处理的。

{
  "mode": "production",
  "output": {
    "filename": "js/[name].js",
    "chunkFilename": "js/[name].js",
    "hotUpdateChunkFilename": "js/[id]-[hash].hot-update.js",
    "path": "myApp/public/packs",
    "publicPath": "/packs/"
  },
  "resolve": {
    "extensions": [".mjs", ".js", ".sass", ".scss", ".css", ".module.sass", ".module.scss", ".module.css", ".png", ".svg", ".gif", ".jpeg", ".jpg"],
    "plugins": [{
      "topLevelLoader": {}
    }],
    "modules": ["myApp/app/assets/javascript", "myApp/app/assets/css", "node_modules"]
  },
  "resolveLoader": { …

尝试使用文件设置故事书.scss。

遵循文档>

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, …

添加sass-loader到webpack 配置后，使用此节点模块@fontsource/roboto时出现构建错误

import "@fontsource/roboto"; // this is in index.tsx

Uncaught Error: Module parse failed: Unexpected character '@' (2:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| /* roboto-cyrillic-ext-400-normal*/
> @font-face {
|   font-family: 'Roboto';
|   font-style: normal;
    at eval (index.css:1)
    at Object../node_modules/@fontsource/roboto/index.css (index.js:18)
    at __webpack_require__ (index.js:556)
    at fn (index.js:767)
    at eval (index.tsx:6)
    at Module../src/index.tsx (index.js:62)
    at __webpack_require__ (index.js:556)
    at index.js:1613 …

我希望能够在@import语句中使用绝对路径。就像是：

@import '/templates/common/variables'

但是，sass 似乎将它解析为我的文件系统中的绝对 url。我希望它在我的项目文件夹中查找。例如。我的文件实际上位于/home/username/project/templates/common/_variables.scss

这有可能吗？

我已经看过了，includePaths但这似乎什么也没做。

我正在使用 encore 编写我的 webpack 文件，它大致如下所示：

const Encore = require('@symfony/webpack-encore');
Encore
    .setOutputPath("web/build/")
    .setPublicPath("/build")
    // [...]
    .enableSassLoader(options => {
        options.includePaths = [path.resolve(__dirname, '/web')];
    })
;

还有这里是生成的 webpack 配置（安静冗长，我没有用上面的示例路径替换我的真实路径）：

{  
    context:'/var/www',
    entry:{  
        index:[  
            './polyfills.js',
            './web/typo3conf/ext/hn_project/ext_index.js',
            './web/typo3conf/ext/hn_templates/ext_index.js'
        ],
        backend:[  
            './polyfills.js',
            './web/typo3conf/ext/hn_project/ext_backend.js'
        ]
    },
    output:{  
        path:'/var/www/web/build',
        filename:'[name].[chunkhash:8].js',
        publicPath:'/build/',
        pathinfo:false
    },
    module:{  
        rules:[  
            {  
                test:/\.jsx?$/,
                exclude:/(node_modules|bower_components)/,
                use:[  
                    {  
                        loader:'babel-loader',
                        options:{  
                            cacheDirectory:true,
                            presets:[  
                                [  
                                    'env',
                                    {  
                                        modules:false,
                                        targets:{  
                                            browsers:[  
                                                'and_chr 67',
                                                'and_uc 11.8',
                                                'chrome …