Werid `:local` в выходном файле`CSS`
Я просто объявляю key-frames:
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Но в CSS файл, который Webpack сделал для меня вижу:
animation: 1s infinite alternate :local(spinner)
Что такое :local???
Я ищу и нашел некоторые решения, но почему они появляются в CSS?
часть решения была, где я использую объявленную анимацию, которую я должен использовать :global:
:global .i-spinner4 {
animation: 1s infinite alternate spinner;
}
Я использовал то решение, которое нашел, оно стало правильным, но в webpack -p версия css исчезает полностью, значит PostCSS Парсер в версии Prod игнорировать его полностью...
Как я могу это исправить???
это моя версия для разработчиков webpack конфигурации:
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin"),
CleanWebpackPlugin = require('clean-webpack-plugin');
const DistDir = path.resolve(__dirname, './dist'),
SrcDir = path.resolve(__dirname, './src');
module.exports = {
resolve: {
alias: {
AppRoot: path.resolve(__dirname, './src/app'),
PcssRoot: path.resolve(__dirname, './src/pcss')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: ['src/app/redux', 'node_modules'],
include: SrcDir,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
exclude: /node_modules/,
include: SrcDir,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[local]',
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
syntax: 'postcss-scss',
map: true,
plugins: () => ([
require('postcss-partial-import')({
prefix: "_",
extension: ".pcss",
glob: false,
path: ['./src/pcss']
}),
require('postcss-nested-ancestors'),
require('postcss-apply'),
require('postcss-custom-properties'),
require('postcss-nested'),
require('postcss-cssnext')({
features: {
nesting: false
},
warnForDuplicates: false
}),
require('postcss-extend'),
require('css-mqpacker')({
sort: true
}),
require('autoprefixer')({
browsers: [`last 15 versions`]
})
])
}
}
]
})
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[name].[ext]',
publicPath: '../font/',
outputPath: 'asset/font/'
}
}
]
},
plugins: [
new ExtractTextPlugin({
filename: `asset/css/style.css`
}),
new CleanWebpackPlugin(`${DistDir}/asset`)
],
entry: {
"sd": `${SrcDir}/app/index.js`
},
externals: {
config: JSON.stringify(require(SrcDir + '/config/config.dev.json'))
},
output: {
path: DistDir,
filename: "asset/js/[name].bundle.js"
},
devServer: {inline: true},
devtool: 'source-map'
};
И это моя версия продукта webpack:
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin"),
CleanWebpackPlugin = require('clean-webpack-plugin');
const DistDir = path.resolve(__dirname, './dist'),
SrcDir = path.resolve(__dirname, './src');
let q = [],
cache = {};
function randomNaming(length,limit) {
let result = '',
chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ-_',
fchars = 'abcdefghjklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_';
do {
if (q.length >= (52 * Math.pow(64, limit - 1)) && limit >= length) {
return 'OutOfPossibility';
} else if (q.length >= (52 * Math.pow(64, limit - 1)) && limit < length) {
++limit;
}
result = '';
result += fchars[Math.floor(Math.random() * fchars.length)];
for (let i = limit - 1; i > 0; --i) {
result += chars[Math.floor(Math.random() * chars.length)];
}
} while (q.includes(result));
q.push(result);
return result;
}
module.exports = {
resolve: {
alias: {
AppRoot: path.resolve(__dirname, './src/app'),
PcssRoot: path.resolve(__dirname, './src/pcss')
}
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: SrcDir,
loader: 'babel-loader'
},
{
test: /\.pcss$/,
exclude: /node_modules/,
include: SrcDir,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
getLocalIdent: (loaderContext, localIdentName, localName, options) => {
var randName = randomNaming(3,2);
if (localName.match(/^i-/i)) {
randName = `i-${randName}`;
} else if (localName.match(/^i_/i)) {
randName = `i_`;
} else {
randName = `${randName}`;
}
if (typeof cache[localName] == 'undefined') {
cache[localName] = randName;
return cache[localName];
} else {
return cache[localName];
}
}
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: () => ([
require('postcss-partial-import')({
prefix: "_",
extension: ".pcss",
glob: false,
path: ['./src/pcss']
}),
require('postcss-nested-ancestors'),
require('postcss-apply'),
require('postcss-custom-properties'),
require('postcss-nested'),
require('postcss-cssnext')({
features: {
nesting: false
},
warnForDuplicates: false
}),
require('postcss-extend'),
require('css-mqpacker')({
sort: true
}),
require('autoprefixer')({
browsers: [`last 15 versions`]
})/*,
require('postcss-csso')({
comments: false
})*/
])
}
}
]
})
},
{
test: /\.(woff|woff2|eot|ttf|svg)$/,
exclude: /node_modules/,
loader: 'file-loader',
options: {
limit: 1024,
name: '[hash:base64:3].[ext]',
publicPath: '../font/',
outputPath: 'asset/font/'
}
}
]
},
plugins: [
new ExtractTextPlugin({
filename: `asset/css/style.css`
}),
new CleanWebpackPlugin(`${DistDir}/asset`)
],
entry: {
"sd": `${SrcDir}/app/index.js`
},
externals: {
config: JSON.stringify(require(SrcDir + '/config/config.prod.json'))
},
output: {
path: DistDir,
filename: "asset/js/[name].bundle.js"
},
devServer: {inline: true},
};
1 ответ
Эта проблема была сделана, когда я объявляю keyframes без намека на css-loader за CSS ModulesЯ должен написать как ниже:
@keyframes :local(spinner) {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
каждый keyframes должен объявить с :local когда Modules являются true в css-loader, то легко напиши class с любым имуществом и его animation имущество. как ниже:
.my-class {
spinner 1s infinite alternate;
}
Сначала используйте название анимации...
Мне удалось избавиться от неудачной сборки, просто используя сначала имя анимации, как показано ниже.
animation: spinner 1s infinite alternate
вместо => анимация: бесконечный счетчик на 1 сек.
Другой обходной путь - не использовать сокращенное свойство анимации. Это приводит к локализации имени анимации, например:
.fadein {
animation-duration: 300ms
animation-name: fadein
animation-fill-mode: forwards
}
@keyframes fadein {
from {
opacity: 0
}
}
Я недавно столкнулся с этой проблемой при использовании версии 2.0.0 css-loader,
Казалось, что это ошибка, вызванная одной из их зависимостей, как указано в этой проблеме: https://github.com/webpack-contrib/css-loader/issues/872
Проблема была исправлена в версии 2.0.2, поэтому обновление до 2.0.2 решило ее для меня.