Question

我使用 Webpack 4.35.3 来编译我的资产。

我有一个application.js文件，它是我的入口点：

 CreateMap<Source, Destination>()
      // custom map settings...
     .ForMember(x => x.Phone, opt => opt.Ignore())
      //Trim all string props now...
     .AfterMap<TrimAllStringProperty>();

        private class TrimAllStringProperty : IMappingAction<object, object>
        {
            public void Process(object source, object destination)
            {
                var stringProperties = destination.GetType().GetProperties().Where(p => p.PropertyType == typeof(string));
                foreach (var stringProperty in stringProperties)
                {
                    string currentValue = (string)stringProperty.GetValue(destination, null);
                    if (currentValue != null)
                        stringProperty.SetValue(destination, currentValue.Trim(), null);
                }
            }
        }

我有一个application.scss文件，该文件是我要导入SCSS / CSS文件的文件：

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'popper.js';
import 'bootstrap';

import '../stylesheets/application.scss';

问题是Webpack在引导主题之前导入我的样式文件。而且我的样式文件不会覆盖引导程序。

如果可能，我不希望在入口点导入bootstrap.scss，因为我想使用变量覆盖bootstrap。

这是我的SCSS文件的Webpack配置：

@import 'bootstrap/scss/bootstrap.scss';
@import './styles.css';

Answer 1

我发现了问题。 Webpack先导入CSS文件，然后再编译SCSS。我将我的CSS文件重命名为SCSS文件。而且有效！

Webpack 4导入SCSS文件的顺序错误

1 个答案: